gpt4 book ai didi

css - 如何对齐 bootstrap 4,居中的水平列表组

转载 作者:太空宇宙 更新时间:2023-11-03 20:26:12 27 4
gpt4 key购买 nike

我正在使用来自 here 的这段代码(如下图)水平对齐列表组中的元素(在 Bootstrap 4 中)。

    .list-group.list-group-horizontal{
display: flex;
flex-direction: row;
}

.list-group.list-group-horizontal .list-group-item {
margin-bottom: 0;
margin-right: 0;
border-right-width: 0;
}
.list-group.list-group-horizontal .list-group-item:first-child {
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.list-group.list-group-horizontal .list-group-item:last-child {
border-top-right-radius:4px;
border-bottom-left-radius:0;
border-right-width: 1px;
}

如何居中对齐列表组?我尝试添加类 text-center 和其他一些东西,但我没有成功。

<div id="app" class="container my-container">

<!-- Header -->
<h2 class="text-center" >Sample Header</h2>

<!-- Buttons -->
<div class="list-group list-group-horizontal">
<a href="#" class="list-group-item active">Categories</a>
<a href="#" class="list-group-item">Search</a>
</div>

</div>

Codepen

最佳答案

为了后代:如果您的元素不是 flex 元素,则应用 d-flex justify-content-center

原始答案:justify-content-center 应用到 list-group

代码笔:https://codepen.io/anon/pen/gZRzOR

它在文档中:https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

<div class="list-group list-group-horizontal justify-content-center">
....
....
</div>

关于css - 如何对齐 bootstrap 4,居中的水平列表组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53926909/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com