如何对齐引导程序 4，水平列表组居中答案

【问题标题】：How to align bootstrap 4, horizontal list group in center如何对齐引导程序 4，水平列表组居中
【发布时间】：2019-05-24 09:54:04
【问题描述】：

我正在使用来自here 的这个 sn-p 代码（如下所示）水平对齐列表组中的项目（在 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

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

为了后代： 如果您的元素不是 flex 元素，请应用 d-flex justify-content-center。

原答案： 将justify-content-center 应用到list-group

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

【讨论】：

这行得通，但似乎d-flex 不是必需的。需要d-flex 吗？
你是对的——不需要。需要创建一个元素 display: flex 但在您的情况下它已经是。
@zer0：我建议在你的答案中添加 d-flex ......将来会使用你的答案的人会被误导......他们只会添加“justify-content-center” " 向他们的 css 上课，并期望一切正常。

【解决方案2】：

使用Justify content，更改元素的水平位置：

.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;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

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

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

【讨论】：