css - 如何使用 Bootstrap 声明列表？

Question

我正在使用 bootstrap，我需要实现一个要显示在多个列上的元素列表。

Bootstrap 使用 12 个单元宽的网格。我的元素有 3 个单元格宽(我就是这样滚动的)，这意味着一行只能容纳 4 个元素。

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

我的 item 不是简单的文本，而是一张“卡片”:

代码可以是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>

但感觉是非语义的。我的元素显示在多行中这一事实确实与展示选择有关。

此外，如果我现在决定我的元素应该更宽，我必须更改我的文档的结构(而不​​是类属性)。

此外，如果我的所有元素都显示在彼此之上，那么在移动屏幕上这种做事方式就更加人为了。

还有其他方法可以写我的 list 吗？一种更“语义”的方式？

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>