在 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>
...并且仍然保持水平。
最佳答案
因此,您必须完成的选项包括用其他类覆盖类中的样式,或者使用看起来更像您需要的不同组件,例如 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>
关于bootstrap-4 - 我们如何使用 Bootstrap 4 使列表组水平,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54099704/