Question

我正在使用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

Answer 1

对于后代： 如果您的元素不是flex元素，则应用closeLabelPressed。

原始答案： 将LabelTest.start应用于d-flex justify-content-center

Codepen：https://codepen.io/anon/pen/gZRzOR

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

justify-content-center

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

如何对齐Bootstrap 4，水平列表组居中

2 个答案: