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; 
}