Bootstrap 如何在navbar-expand-sm下使按钮居中?

uhry853o  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(1)|浏览(205)

下面是我现在所处的位置。我经常遇到这个问题,即不能使用 Bootstrap 灵活地放置东西。在这种情况下,我想使用justify-content将所有按钮放置在中心:center,但navbar-expand-sm的内置类显然默认为justify-content:灵活启动。我该怎么办?谢谢![文本](https://stac enter image description here

<nav class="navbar bg-danger navbar-dark position-relative">
        <div class="navbar-expand-sm">
            <div class="container-xxl">
                <button 
              class="navbar-toggler" 
              type="button" 
              data-bs-toggle="collapse"
              data-bs-target="#navmenu"
            > 
            <span class="navbar-toggler-icon"> </span>
            </button>
            <div class="collapse navbar-collapse" id="navmenu">
                <!-- How to put the buttons in the middle? -->
                <ul class="navbar-nav">
                    <li class="nav-item ml-3">
                        <a href="#StudyPlan" class="nav-link" style="border-radius: 1rem white;">Login</a>
                    </li>
                    <li class="nav-item">
                        <a href="#Instructors" class="nav-link">Other Service</a>
                    </li>
                    <li class="nav-item">
                        <a href="My Blog.html" class="nav-link">My Blog</a>
                    </li>
                    <li class="nav-item">
                        <a href="#CommonQuestions" class="nav-link">Contact Us</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
pdsfdshx

pdsfdshx1#

justify-content-center添加到navbar-expand-sm旁边,然后查看此操作是否有效
或尝试添加相应的CSS

.navbar-expand-sm { justify-content: center !important; }

相关问题