在引导程序 4 中使用 flex 在移动设备上对齐列表项中心答案

【问题标题】：Align list items center on mobile in bootstrap 4 with flex在引导程序 4 中使用 flex 在移动设备上对齐列表项中心
【发布时间】：2019-08-14 14:59:08
【问题描述】：

我有一个名为 header_full_width 的 div。这是我页面顶部的 100% 宽度 div。在这个 div 中，有一个容器、一行、一个 col-md-12 div，然后是一个带有列表项和链接的 ul。

我的问题是，在移动设备上，这些链接没有居中，它们会离开页面并且水平滚动条会出现。

我尝试了这些类：align-items-center 和另一个 html 代码，但是没有用。

<div class="header_full_width">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <ul class="header_links_ul header_links_ul_left d-flex justify-content-center justify-content-md-start">
                    <li><a href="https://kemenyem.hu/" class="header_top_links" title="Kezdőlap">Kezdőlap</a></li>
                    <li><a href="https://kemenyem.hu/informaciok" class="header_top_links" title="Információk">Információk</a></li>
                    <li><a href="https://kemenyem.hu/aktualis-akciok" class="header_top_links" title="Aktuális akciók">Aktuális akciók</a></li>
                    <li><a href="https://kemenyem.hu/kiemelt-termekek" class="header_top_links" title="Kiemelt termékek">Kiemelt termékek</a></li>
                    <li><a href="https://kemenyem.hu/hirek" class="header_top_links" title="Hírek, érdekességek">Hírek, érdekességek</a></li>
                    <li><a href="https://kemenyem.hu/elerhetosegek" class="header_top_links" title="Elérhetőségek">Elérhetőségek</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

在移动设备上，我希望这些链接在彼此下方垂直和水平居中。

演示网站链接：kemenyem.hu

【问题讨论】：

请也分享css代码
我没有任何 CSS，只有这些引导 4 个类。
我检查了显示为垂直的代码。检查 li 的样式为 display:block;
网站链接：kemenyem.hu
问题在于

标签： html css twitter-bootstrap bootstrap-4 anchor

【解决方案1】：

问题是，您将d-flex 设置为所有媒体尺寸。

使用d-sm-flex 将d-flex 设置为xs（移动）上的媒体大小
使用d-xs-inline-block 将xs 上的ul 设置为d-inline-block

现在它的行为应该像你想要的那样：

<div class="header_full_width">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <ul class="header_links_ul header_links_ul_left d-sm-flex d-xs-inline-block justify-content-md-start">
                    <li><a href="https://kemenyem.hu/" class="header_top_links" title="Kezdőlap">Kezdőlap</a></li>
                    <li><a href="https://kemenyem.hu/informaciok" class="header_top_links" title="Információk">Információk</a></li>
                    <li><a href="https://kemenyem.hu/aktualis-akciok" class="header_top_links" title="Aktuális akciók">Aktuális akciók</a></li>
                    <li><a href="https://kemenyem.hu/kiemelt-termekek" class="header_top_links" title="Kiemelt termékek">Kiemelt termékek</a></li>
                    <li><a href="https://kemenyem.hu/hirek" class="header_top_links" title="Hírek, érdekességek">Hírek, érdekességek</a></li>
                    <li><a href="https://kemenyem.hu/elerhetosegek" class="header_top_links" title="Elérhetőségek">Elérhetőségek</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

使用 d-xs-inline-block 和 d-md-flex 代替，如果您希望它也以 sm 为中心

要了解更多信息，请查看 display utility classes 和 responsive breakpoints 的引导文档。

【讨论】：

【解决方案2】：

我想你正在寻找flex-column，试试这个...

<ul class="header_links_ul header_links_ul_left d-flex justify-content-center flex-column flex-md-row align-items-center justify-content-md-start">

【讨论】：