Question

如何将列表项彼此对齐，以使断点<= 575px（xs），并以575px（sm）的断点对齐，并具有自举显示属性？

根据How to display a list inline using Twitter's Bootstrap，我可以使用'list-inline'。示例：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

这通常可以正常工作，但是就断点而言如何工作？通常，引导程序允许以表示法设置断点，例如“ d-sm-block”（仅在最小宽度上显示：576px），但是文档在这方面没有提及“ list-inline”。

Answer 1

与explained in the docs一样，Display类适用于任何类型的CSS display:值。 d-sm-inline或d-sm-inline-block形式也可以使用。

Answer 2

自v4.3起，Bootstrap当前不支持list-inline-它只是所有断点的实用程序函数。我也看不到任何迹象表明它会在将来的版本中得到支持，因为Github及以后的shiplist v4.4没有对此的引用。

要仅使用Bootstrap实用程序来获得所需的内容，就必须使用Display实用程序类d-{breakpoint}-inline-flex。 ml-{breakpoint}-{size} Spacing实用程序类还可用于间隔目的，以继续支持断点行为调整。

在整页或展开代码段模式下打开下面的代码段以查看结果：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<ul class="list-unstyled d-sm-inline-flex">
  <li>Lorem ipsum</li>
  <li class="ml-sm-3">Phasellus iaculis</li>
  <li class="ml-sm-3">Nulla volutpat</li>
</ul>

引导程序4：列出不同断点的内联项

2 个答案: