分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何在 boostrap 4 中对齐容器中心的导航栏，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何在 boostrap 4 中对齐容器中心的导航栏？

开发过程中遇到如何在 boostrap 4 中对齐容器中心的导航栏的问题如何解决？下面主要结合日常开发的经验，给出你关于如何在 boostrap 4 中对齐容器中心的导航栏的解决方法建议，希望对你解决如何在 boostrap 4 中对齐容器中心的导航栏有所启发或帮助；

我希望导航栏位于页面的中心。我怎样才能给造型让它在中心。目前它从页面的左侧开始。

section class="navbarSection">
      <div class="container-fluID">
          <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
             <div class="navbar2">
              <nav class="navbar navbar-expand-lg bg-white paddingo">
        
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" ID="navbarText">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item  ">
                      <a class="nav-link firstlink" href="#">WHO WE ARE <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item ">
                      <a class="nav-link " href="#">OUR serviCES</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link " href="#">OUR PROjeCTS</a>
                    </li>
                  
                    <li class="nav-item">
                      <a class="nav-link" href="#">CONTACT US</a>
                    </li>
                  
                   <li class="nav-item">
                      <a class="nav-link" href="#">CAREERS</a>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
    
             </div>
            </div>
      </div>
    </section>

解决方法

只需添加

<div class="d-flex col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-priMary justify-content-center">

因此，通过这种方式，您可以使用 justify-content-center 声明一个弹性框，并且它们应该位于正确的位置：

如何在 boostrap 4 中对齐容器中心的导航栏

.navBar2{
display:flex;
justify-content:center;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <section class="navbarSection">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="navBar2">
                        <nav class="navbar navbar-expand-lg bg-white paddingo">

                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                            <div class="collapse navbar-collapse" id="navbarText">
                                <ul class="navbar-nav mr-auto">
                                    <li class="nav-item  ">
                                        <a class="nav-link firstLink" href="#">WHO WE ARE <span class="sr-only">(current)</span></a>
                                    </li>
                                    <li class="nav-item ">
                                        <a class="nav-link " href="#">OUR serviCES</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link " href="#">OUR PROjeCTS</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="#">CONTACT US</a>
                                    </li>

                                    <li class="nav-item">
                                        <a class="nav-link" href="#">CAREERS</a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>

                </div>
            </div>
        </div>
    </section>
</body>

</html>

只需从导航栏导航中删除 ml-auto：

          <ul class="navbar-nav ml-auto">
            <li class="nav-item  ">
              <a class="nav-link firstLink" href="#">WHO WE ARE <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item ">
              <a class="nav-link " href="#">OUR serviCES</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="#">OUR PROjeCTS</a>
            </li>
          
            <li class="nav-item">
              <a class="nav-link" href="#">CONTACT US</a>
            </li>
          
           <li class="nav-item">
              <a class="nav-link" href="#">CAREERS</a>
            </li>
          </ul>

并使其成为@H_488_45@m-auto，这样自动边距会同时应用于左右两侧。

Centered bootstrap nav codepen