Question

我在我的网站上使用以下Bootstrap List Group以及链接和徽章：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div class="list-group">
  <a href="/resources" class="list-group-item">
    Africa <span class="badge badge-default pull-right">4 offers</span>
  </a>
  <a href="/resources" class="list-group-item">
    More <span class="badge badge-default pull-right">14 offers</span>
  </a>
  <a href="/resources" class="list-group-item">
    Another <span class="badge badge-default pull-right">123 offers</span>
  </a>
</div>

是否可以将此列表列表设为多列？我需要它作为3个响应相等的列。

Answer 1

是的，这就是我们使用Bootstrap的原因。

Bootstrap 包含强大的移动优先 flexbox 网格系统，用于构建所有布局形状和大小。

它基于12列布局，并且有多个层，每层一个   媒体查询范围。

您可以将它与Sass mixins或我们预定义的类一起使用。

Grid system

/*added posotion absolute to the badge  */
.badge {
    position: absolute;
    right: -15px;
}
list-group-item{
    position:relative;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- using bootstrap grid system parent div is 12 columns -->
<div class="list-group col-lg-12">
<!-- using bootstrap grid system child div is 4 columns -->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <a href="/resources" class="list-group-item">
    Africa <span class="badge badge-default pull-right">4 offers</span>
  </a>
 </div>
 <!-- using bootstrap grid system child div is 4 columns -->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <a href="/resources" class="list-group-item">
    More <span class="badge badge-default pull-right">14 offers</span>
  </a>
 </div>
 <!-- using bootstrap grid system child div is 4 columns -->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  <a href="/resources" class="list-group-item">
    Another <span class="badge badge-default pull-right">123 offers</span>
  </a>
</div>
</div>

具有链接的Bootstrap多列响应列表组

1 个答案: