3

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

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

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

我item的不是简单的文字，而是一张“卡片”：在此处输入图像描述

代码可以在那里找到。

写这个的直接方法是：

<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>

但它感觉没有语义。我的项目显示在多行上的事实确实与演示选择有关。

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

除此之外，在手机屏幕上做事的方式更加人为，我所有的项目都显示在彼此的顶部。

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

4

3 回答 3

4

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

<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>
于 2013-11-04T21:01:32.450 回答
3

您可以使用 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

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

于 2013-11-04T21:14:45.587 回答
1

1.您可以随时通过在此页面@gridColumns中设置您的偏好或覆盖 css.less 如果您愿意，将默认的 12 空间网格更改为您喜欢的任何内容。

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

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

3.但正如 Milche 所说，如果你坚持一行，col-md-3就可以解决问题。我想我会使用一个标签，以明确它是内联的。

于 2013-11-04T21:31:22.287 回答