代码之家 › 专栏 › 技术社区 › klewis

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

bootstrap-4

0

klewis · 技术社区 · 7 年前

下面是我的清单。。。

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

2 回复 | 直到 7 年前

1

3

IvanS95 7 年前

因此,您必须完成的选项包括使用其他类覆盖类中的样式,或者使用看起来更像您需要的其他组件 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>

2

Shidersz 7 年前

一种方法是使用类 d-flex 和 flex-row 上 list-group . 如果希望项目堆叠在较小的屏幕上,可以使用 breakpoint 性虐待 LG 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>