Bootstrap - 列表項目的網格佈局

Question

我有一個網頁，其中使用的是Bootstrap 3.在此頁面中，我希望將4個面板的列表放置在一個2x2網格中。我想網格基本上是這樣的：

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

我想網格進行風格像一個list-group雖然。按照風格，我的意思是有邊框樣式和內部填充像列表組項目。我不想要一列項目。雖然我已經能夠像這個Bootply所示的那樣關閉，但它並不在那裏。網格中的第一行和第二行之間仍然有空行。但是，如果我擺脫了空行，行之間的邊界看起來不正確。另外，我不確定是否應該使用像我使用的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

您可以使用常規列表組。然後用CSS來刪除不需要的圓角和2列表組位置，旁邊是相互

見下文片斷或bootply：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; 
} 

然後你就可以刪除第二行項目上邊框：

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