Question

我有一个使用Bootstrap 3的网页。在这个网页中，我显示了一个可变数量项目的列表。我希望水平布置项目，如果项目超过item-container的宽度，则换行到下一行。目前，我有following。在这段代码中，我有：

<div class="container">
  <div class="item-wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>    
  </div>
</div>

正如您在Bootply中看到的那样，这些项目只是垂直放置。它们没有水平布置或包裹。我不能使用flexbox，因为我必须支持旧的浏览器。我试图让我的布局看起来像这样：

+-----------+
| █ █ █ █ █ |
| █ █ █ █ █ |
| █ █ █ █ █ |
| █ █ █     |
+-----------+

有没有办法用CSS和Bootstrap做到这一点？

Answer 1

只需将.item内联：display: inline-block;

.item-wrapper {
  float:left;
  width: 40%;
}

.item {
  height:54px;
  width:54px;
  background-color:orange;
  margin:4px;
  display: inline-block;
}

Bootply

Answer 2

为了获得引导程序，您可以为item-wrapper部门提供另一个类<div class="item-wrapper col-lg-4">

在Bootstrap中包装项目

2 个答案: