Question

使用Bootstrap 4时，列表组组件具有丰富的设计美感，例如边框，背景色，圆角等。

附上我的以下列表...

<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的其他组件，在这里您可以了解我的意思。 / p>

如果您使用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>

Answer 2

一种方法是在d-flex上使用类flex-row和list-group。如果要将项目堆叠在较小的屏幕上，可以使用breakpoint类引导程序（ SM ， MD ， LG ，** XL *）。例如：flex-sm-row

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<ul class="list-group flex-sm-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>

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

2 个答案: