ブートストラップを使用してこれらのボックスを整列するにはどうすればよいですか？
ニヴェディタ
コードは次のとおりです。
<div class="row" >
<div id="box1" class="col-lg-4 box"style="">
<img src="images/1.png" style="" class="num-img">
<a href="#" style="text-decoration:none;color:#fff;">box 1 content</a>
</div>
<div id="box2" class="col-lg-4 box" style="">
<img src="images/2.png" style="" class="num-img">
<a href="#" style="text-decoration:none;color:#fff;">box 2 content</a>
</div>
<div id="box3" class="col-lg-4 box" style="">
<img src="images/3.png" style="" class="num-img">
<a href="#" style="text-decoration:none;color:#fff;">box 3 content</a>
</div>
</div>
ボックスのCSS：
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
これは私がそれをどのように見せたいかです： 
これが今の様子です：
そして、これは私がboxクラスを削除して書くときの様子です：
<div id="box1" class="col-lg-4 "style="">
どうすればこれを修正できますか？
更新（追加後margin:0 auto）：
li0n_za
cssがロードされるタイミングによってwidthは、のをオーバーライドしている可能性があります。試してみてくださいcol-lg-4 divsbox
<div id="box1" class="col-lg-4">
<div class="box">
<img src="images/1.png" style="" class="num-img">
<a href="Search.jsp" style="text-decoration:none;color:#fff;">box 1 content</a>
</div>
</div>
これにより、col-lg-4divのpx幅が設定されるの%ではなく、内部の幅がdiv設定されwidthます。
ブロックをブートストラップ内の中央に配置する場合は、csscolsに追加margin: 0 auto;しますbox。
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
margin: 0 auto;
}
フィドルを使った例
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
ブートストラップを使用してこれらの3つの列を中央に配置するにはどうすればよいですか
- 2
ブートストラップを使用してこれらの画像を同じサイズにするにはどうすればよいですか?
- 3
ブートストラップで少なくとも1つのチェックボックスがマークされていることを検証し、この情報をphpに渡すにはどうすればよいですか？
- 4
textareaに2ボタンを追加し、ブートストラップを使用してそれらを自動的に整列させるにはどうすればよいですか？
- 5
ブートストラップクラスを使用して、divを他のdiv内に中央揃えするにはどうすればよいですか？
- 6
これらのチェックボックスをデータストアでバックアップするにはどうすればよいですか？
- 7
ブートストラップを使用してボーダレステーブルを作成するにはどうすればよいですか
- 8
ブートストラップを使用して行から別の行にアイテムを抽出するにはどうすればよいですか？
- 9
javascript / jqueryのすべてのチェックボックスを合計するにはどうすればよいですか？また、ブートストラップラベルに動的に表示するにはどうすればよいですか？
- 10
アラートボックスを使用してこの値を取得するにはどうすればよいですか？
- 11
これらすべての続きをブートストラップの同じ行に揃えるにはどうすればよいですか？
- 12
ジャンボトロンブートストラップを使用して1行に5列を作成するにはどうすればよいですか？
- 13
このブートストラップdivを削除するにはどうすればよいですか
- 14
ブートストラップを使用して列を複数の行にまたがらせるにはどうすればよいですか？
- 15
ブートストラップのチェックボックスとラベルを適切に配置するにはどうすればよいですか？
- 16
aws cliを使用して複数のブートストラップアクションを指定するにはどうすればよいですか？
- 17
javascriptを使用してアラートボックスをブロックするにはどうすればよいですか？
- 18
CakePHP 3でグリフィコンを使用してブートストラップボタンを出力するにはどうすればよいですか？
- 19
ブートストラップからメールボックスアイコンを設定するにはどうすればよいですか？
- 20
2行目に折り返されるブートストラップ列は下に整列し、大きなギャップを残します。このギャップを取り除くにはどうすればよいですか？
- 21
ブートストラップを使用して画像とテキストを垂直方向の中央に配置するにはどうすればよいですか？
- 22
ブートストラップを使用して左スクロールバーを追加するにはどうすればよいですか？
- 23
ブートストラップを使用している場合、3つの画像を連続して表示するにはどうすればよいですか？
- 24
Django DeleteViewのブートボックスを使用するにはどうすればよいですか？
- 25
このラップトップSATAHDDを通常のデスクトップSATAケーブルに接続するにはどうすればよいですか？
- 26
ブートストラップチェックボックスのEditorTemplateを作成するにはどうすればよいですか？
- 27
ブートストラップ4：チェックボックスの色を変更するにはどうすればよいですか？簡単な方法
- 28
プレースホルダーを使用して、ブートストラップモデルに表示されるテキストボックスに値を設定するにはどうすればよいですか。
- 29
ブートストラップ4カードヘッダーのアイテムを整列するにはどうすればよいですか
コメントを追加