Question

我正在尝试将我的列表项保存在div中具有20px填充的div中。我还想让div响应，所以根据浏览器宽度显示3列或4列。

我的代码：

<div>
   <ul class="list-inline">
      <li>items1</li>
      <li>items2</li>
      <li>items3</li>
      <li>items4</li>
      <li>items5</li>
      <li>items6</li>
      <li>items7</li>
      <li>items8</li>
   </ul>
</div>

每个项目都是一个包含大量信息的矩形div。

我想将项目分成显示

 --------------------------
|   
|   item1  item2  item3
|
|
|

或

 -------------------
|   
|   item1   item2
|
|   item3
|

基于浏览器宽度。我还想在div中保持padding的最小20px。

我如何在bootstrap中执行此操作？

Answer 1

请记住，BS中的大多数类都可以重复使用，并且可以应用于不同的元素，因此在您的特定情况下，只需将UL和LI元素视为DIV，使用常规的Bootstrap网格与他们合作。像这样：

<div class="container">
   <ul class="row list-inline">
     <li class="col-lg-3 col-xs-4">items1</li>
     <li class="col-lg-3 col-xs-4">items2</li>
     <li class="col-lg-3 col-xs-4">items3</li>
     <li class="col-lg-3 col-xs-4">items4</li>
     <li class="col-lg-3 col-xs-4">items5</li>
     <li class="col-lg-3 col-xs-4">items6</li>
     <li class="col-lg-3 col-xs-4">items7</li>
     <li class="col-lg-3 col-xs-4">items8</li>
     <li class="col-lg-3 col-xs-4">items9</li>
     <li class="col-lg-3 col-xs-4">items10</li>
     <li class="col-lg-3 col-xs-4">items11</li>
     <li class="col-lg-3 col-xs-4">items12</li>
   </ul>
</div>

See Bootply here

正如你所看到的，没有更多，甚至没有额外的CSS，Bootstrap将使用其默认类来处理所有事情

如何在我的案例中显示ul项目？

1 个答案: