ブートストラップでのバーティカル・アラインメントの使用方法
簡単な問題:bootstrapを使って、colの中のcolを垂直方向に揃えるにはどうしたらよいでしょうか?例はこちら(child1aとchild1bを垂直に並べたい)。
HTML
<div class="col-lg-12">
<div class="col-lg-6 col-md-6 col-12 child1">
<div class="col-12 child1a">Child content 1a</div>
<div class="col-12 child1b">Child content 1b</div>
</div>
<div class="col-lg-6 col-md-6 col-12 child2">
Child content 2<br>
Child content 2<br>
Child content 2<br>
Child content 2<br>
Child content 2<br>
</div>
</div>
UPDATE (更新)
一部のCSSです。
.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;
}
.child1a, .child1b{
border:4px solid black;
display:inline-block !important;
}
.child1{
border:4px solid blue;
height:300px;
display:table-cell !important;
vertical-align:middle;
}
.child2{
border:4px solid red;
}
51
3
table-layout: fixed` は、col-* クラスの機能を壊すことを防ぎます。
親の場合:
display: table;
。子の場合表示:テーブル-セル;`
次に、
垂直方向の整列:中央;
を追加する。私はバイオリンを作ることができますが、今は家の時間です、やったー
さて、これが素敵なバイオリンです。http://jsfiddle.net/lharby/AJAhR/
つまり、1bと1bを並べるということですか?