Question

我正在使用bootstrap，我需要实现要在多列上显示的项目列表。

Bootstrap使用12个单元格宽的网格。我的项目是3个单元格宽度（这就是我的滚动方式），这意味着一行只能容纳4个项目。

item 1 | item 2 | item 3 | item 4 
item 5

我的item不是简单的文字，而是“卡片”： enter image description here

代码可以是found there。

写这个的简单方法是：

<div class="row">
    <div class="col-md-3">[item 1]</div>
    <div class="col-md-3">[item 2]</div>
    <div class="col-md-3">[item 3]</div>
    <div class="col-md-3">[item 4]</div>
</div>
<div class="row">
    <div class="col-md-3">[item 5]</div>
</div>

但它感觉非语义。我的项目显示在很多行上这一事实与演示文稿选择完全相关。

此外，如果我现在决定我的项目应该更宽，我必须更改文档的结构（而不是类属性）。

除了这种做事方式在移动屏幕上更加人为，因为我的所有物品都是相互叠加显示的。

还有另一种方法可以写我的清单吗？更“语义”的方式？

Answer 1

从我的立场来看，显示带有超文本标记的无序列表的最佳方法是：

<ul>
    <li>

因此，您可以尝试ul>li列表，将<li>宽度设置为25％，浮动左侧。

你的第5个元素应该在左下方堆叠。

如果您仍想使用引导网格系统，只需将“项目”放在同一行中即可。

<div class="row">
    <div class="col-md-3">item 1</div>
    <div class="col-md-3">item 2</div>
    <div class="col-md-3">item 3</div>
    <div class="col-md-3">item 4</div>
    <div class="col-md-3">item 5</div>
    <div class="col-md-3">item 6</div>
    <div class="col-md-3">item 7</div>
</div>

溢出的元素将在左下方堆叠。

试试看：

<ul class="row">
    <li class="col-md-3">item 1</li>

Answer 2

您可以使用UL列表..

<ul class="list-unstyled">
    <li class="col-md-3">item 1</li>
    <li class="col-md-3">item 2</li>
    <li class="col-md-3">item 3</li>
    <li class="col-md-3">item 4</li>
    <li class="col-md-3">item 5</li>
    <li class="col-md-3">item 6</li>
    <li class="col-md-3">item 7</li>
</ul>

演示：http://bootply.com/91825

但是，如果您决定扩大规模，则需要更改此标记。

Answer 3

1.您可以随时将默认的12个空间网格更改为您喜欢的任何内容，方法是在this page中将@gridColumns设置为您的首选项，或者如果您愿意，可以覆盖css.less。

2.使用Bootstrap，您可以使用自定义类内联来构建列表：

<ul class="inline">
  <li>...</li>
</ul>

3.但正如Milche提到的那样col-md-3如果你坚持一行就会做到这一点。我想我会使用一个标签，以明确它是内联的。

如何用bootstrap声明一个列表？

3 个答案: