web-dev-qa-db-ja.com

Bootstrap Alert Size Change

アラートがページ全体に及ぶ範囲を編集できる方法はありますか?

これが私のアラートの例です:

<div class="alert alert-success">Your first number was correct.</div>
27
user2399308

いくつかのCSSを使用する

.alert {
   width:40%;    
}

http://www.bootply.com/96921

上記の例では、アラート幅がコンテナ、この場合は画面の40%になります。

固定幅を設定することもできます。

.alert {
   width:300px;    
}
26
Trevor

アラートが内側のテキストのサイズと同じであるようにしたい場合:

.alert {
  display:inline-block;
}
25
AlainIb

それをrowに配置し、そのcolをオフセットしてくれました。

<div class="row">
    <div class="alert alert-danger col-md-4 col-md-offset-4" align="center">

    </div>
</div>
9
shinzou

質問からコードを取得するだけでうまくいくと思います

<div class="alert alert-success">

このような列クラスのいずれかを追加します

<div class="alert alert-success col-md-3">

とにかくそのような何かが私のために働いた、私の正確なコードは

<div class="alert alert-info alert-dismissible col-md-3" role="alert">

ボタンよりも少しだけ大きい小さなアラートを作成しました。

2
cardamom

アラートが.rowの一部である場合、.col-lg-12を含むようにそのクラスを設定すると、アラートがコンテナ全体に広がります。

0
MrD

パーセンテージまたは固定ピクセルが誰の要件にも適合せず、テキストごとに自動幅が必要な場合、bootstrap 4.1.3、アラートdivの周りに「行」を追加するだけで、私のためにトリックを行いました:

<div class="row">
   <div id="info" class="alert alert-success"></div>
</div>

指定されたバージョンのBootstrapを持っている人を助けることを願っています。

0
Ajay Kumar