ブートストラップ - リストアイテムのグリッドレイアウト

Question

私はブートストラップ3を使用しているウェブページを持っています。このページでは、4つのパネルのリストを2x2グリッドにまとめたいと考えています。

+-----+-----+ 
| 1 | 2 | 
| A | B | 
+-----+-----+ 
| 3 | 4 | 
| C | D | 
+-----+-----+ 

私はグリッドはいえlist-groupのようなスタイルになりたい：私は、グリッドは基本的に次のようになりたいです。スタイルをとって、私は、リストグループ項目のようなボーダースタイリングと内部パディングを持つことを意味します。私はアイテムの単一の列を必要としません。私はこのBootplyに示されているように近づくことができましたが、そこにはあまりありません。グリッドの最初の行と2番目の行の間にはまだ空白行があります。しかし、空白行を取り除くと、行間の境界線が正しく表示されません。また、私が使っているようにwidth:50%を使うべきかどうかは分かりません。

問題の私のコードは次のようになります。私は、このレイアウトに私のアプローチで間違った

<div class="container"> 
    <div class="list-group list-group-horizontal block" style="width:100%;"> 
    <div class="list-group-item" style="width:50%;"> 
     <h4>Portion 1</h4> 
     <h4><small>This is a description</small></h4> 
    </div> 
    <div class="list-group-item" style="width:50%;"> 
     <h4>Portion 2</h4> 
     <h4><small>This is a description</small></h4> 
    </div> 
    </div> 
    <div class="list-group list-group-horizontal block" style="width:100%;"> 
    <div class="list-group-item" style="width:50%;"> 
     <h4>Portion 3</h4> 
     <h4><small>This is a description</small></h4> 
    </div> 

    <div class="list-group-item" style="width:50%;"> 
     <h4>Portion 4</h4> 
     <h4><small>This is a description</small></h4> 
    </div> 
    </div> 
</div> 

何をしているのですか？

Answer 1

通常のリストグループを使用できます。スニペットはないいくつかの理由http://www.bootply.com/iYq8A9nVZQ

.my-list-group { 
 
    width: 50%; 
 
    display: inline-block; 
 
} 
 
    
 
.left .list-group-item { 
 
    border-top-right-radius: 0px; 
 
    border-bottom-right-radius: 0px; 
 
} 
 

 
.right { 
 
    float: right; 
 
} 
 
    
 
.right .list-group-item { 
 
    border-top-left-radius: 0px; 
 
    border-bottom-left-radius: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="list-group my-list-group left"> 
 
    <div class="list-group-item"> 
 
     <h1>item 1</h1> 
 
     <p>sub</p> 
 
    </div> 
 
    <div class="list-group-item"> 
 
     <h1>item 3</h1> 
 
     <p>sub</p> 
 
    </div> 
 
    </div> 
 
    <div class="list-group my-list-group right"> 
 
    <div class="list-group-item"> 
 
     <h1>item 2</h1> 
 
     <p>sub</p> 
 
    </div> 
 
    <div class="list-group-item"> 
 
     <h1>item 4</h1> 
 
     <p>sub</p> 
 
    </div> 
 
    </div>

Answer 2

あなたは空白行削除するの.list-グループのデフォルトのマージン下を上書きする必要があります。

.list-group-horizontal { 
    margin-bottom: 0; 
} 

を次にあなたが2行目の項目の上部の境界線を削除することができます。

.list-group-horizontal + .list-group-horizontal > .list-group-item { 
    border-top: 0; 
}