divをきつくまとめる - 行レイアウトではない

Question

私のcol-*ディビジョンを互いに隣り合わせで「ぴったり」フィットさせる方法を見つけようとしています。私はデザイナーではないので、私は私が何を達成しようとしているのかを説明しようとしながら私と一緒に裸でいます。

私は、ブートストラップのグリッドシステム全体がどのように機能するかについて公正なアイデアを持っています。だからこそ、私はになります。私は奇妙なCSSなしでやりたいことをやっています。

基本的には、もし私が6 col-sm-4div（普通のラップトップ画面では、フルサイズ）を持っていれば、私は3の行の下の3行で終わるつもりです。一番上の行が他の列よりも背が高いので、残りの4つのdivが空白になるようにします。

このように、「空白」を取り除いて行を取得するにはどうすればよいのですか？私はcol-* divを持つようにしましたが、rowとcontainer divsをラップしませんでしたが、同じ結果が得られます。

ありがとうございました！

Answer 1

3つのブートストラップのdiv（1つの行に2つの要素）で '要素'をラップするだけですか...何か不足していますか？

Answer 2

この質問は多くの形で何度も尋ねられており、多くのソリューションとYMMVがあります。

解決策の1つは、nth-child()セレクタを使用して行をクリアすることです。必要に応じて、さまざまな画面解像度をターゲットにするメディアクエリを追加します。

.col-sm-4 { 
    border: 1px dashed skyblue; 
} 
/* After every 3rd .col-sm-4 we apply clear: left; */ 
.col-sm-4:nth-child(3n+1) { 
    clear: left; 
} 

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4"> 
     Content 1 
     </div> 
     <div class="col-sm-4"> 
     Content 2<br> 
     Content 2<br> 
     Content 2 
     </div> 
     <div class="col-sm-4"> 
     Content 3 
     </div> 
     <div class="col-sm-4"> 
     Content 4 
     </div> 
     <div class="col-sm-4"> 
     Content 5 
     </div> 
     <div class="col-sm-4"> 
     Content 6 
     </div> 
     <div class="col-sm-4"> 
     Content 7 
     </div> 
    </div> 
</div> 

デモJSFiddle。

Answer 3

これを行う最も簡単な方法は、すべてを1つの行として扱い、各項目を列内に追加することです。 col間にスペースを入れたくない場合は、デフォルトのパディングを削除してください。

Fiddle

<div class="col-md-12"> 
    <div class="col-md-4"> 
     <div style="height:40px; background-color:black" ></div> 
     <div style="height:15px; background-color:orange"></div> 
    </div> 
    <div class="col-md-4"> 
     <div style="height:20px; background-color:red"></div> 
     <div style="height:55px; background-color:green"></div> 
    </div> 
    <div class="col-md-4"> 
     <div style="height:20px; background-color:yellow"></div> 
     <div style="height:11px; background-color:gray"></div> 
    </div> 
    </div>