bootstrap-4 - 我们如何使用 Bootstrap 4 使列表组水平

Question

在 Bootstrap 4 中，list-group 组件的设计美学非常丰富，例如边框、背景色、圆角等。

我的以下列表...

<ul class="list-inline">
  <li class="list-inline-item align-top">item 1</li>
  <li class="list-inline-item align-top">item 2</li>
  <li class="list-inline-item align-top">item 3</li>
  <li class="list-inline-item align-top">item 4</li>
</ul>

...我怎样才能让它看起来像下面这样...

<ul class="list-group">
  <li class="list-group-item">item 1</li>
  <li class="list-group-item">item 2</li>
  <li class="list-group-item">item 3</li>
  <li class="list-group-item">item 4</li>
</ul>

...并且仍然保持水平。

Answer 1

因此，您必须完成的选项包括用其他类覆盖类中的样式，或者使用看起来更像您需要的不同组件，例如 Button Group 在这里您可以看到什么我是说。

如果您使用 flex-row 来改变列表组的方向，您将不得不调整每个项目的边框，使其看起来符合您的需要。在这种情况下，列表组将在大屏幕上水平弯曲，但在小屏幕上堆叠

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

<ul class="list-group flex-md-row">
  <li class="list-group-item">item 1</li>
  <li class="list-group-item">item 2</li>
  <li class="list-group-item">item 3</li>
  <li class="list-group-item">item 4</li>
</ul>

<div class="btn-group rounded border" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-link">Left</button>
  <button type="button" class="btn btn-link">Middle</button>
  <button type="button" class="btn btn-link">Right</button>
</div>