Question

我有一个网页，我在其中使用Bootstrap 3.在这个页面中，我想要一个4个面板的列表放在一个2x2网格中。我希望网格基本上看起来像这样：

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

我希望网格的样式与a list-group类似。通过样式，我的意思是边框样式和内部填充像列表组项目。我不想要一列项目。虽然我已经能够如Bootply所示能够接近，但它并不存在。网格中的第一行和第二行之间仍然有一个空行。但是，如果我摆脱空白行，行之间的边界看起来不正确。另外，我不确定是否应该使用我width:50%之类的。{1}}。

我的问题代码如下：

<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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您必须覆盖 .list-group 的默认margin-bottom才能删除空行：

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

然后您可以删除第二行中项目的上边框：

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

Bootstrap - 列表项的网格布局

2 个答案: