Centering Navbar in Agency- Bootstrap 4 Theme

我只是想知道是否有人可以幫我解決一段時間以來我遇到的問題。我想完成的是將菜單置於頁面頂部（以便服務組合等標題位於水平居中位置）。這裏是一個的jsfiddle我設置Centering Navbar in Agency- Bootstrap 4 Theme

http://jsfiddle.net/bdd9U/1362/

<!-- Navigation --> 
<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top"> 
    <div class="container"> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="hidden"> 
        <a href="#page-top"></a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#services">Services</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#portfolio">Portfolio</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#about">About</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#team">Team</a> 
       </li> 
       <li> 
        <a class="page-scroll" href="#contact">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

<!-- Header --> 
<header> 
    <div class="container"> 
     <div class="intro-text"> 
      <div class="intro-lead-in">Welcome To Our Studio!</div> 
      <div class="intro-heading">It's Nice To Meet You</div> 
      <a href="#services" class="page-scroll btn btn-xl">Tell Me More</a> 
     </div> 
    </div> 
</header> 
<footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <span class="copyright">Copyright &copy; Your Website 2016</span> 
      </div> 
      <div class="col-md-4"> 
       <ul class="list-inline social-buttons"> 
        <li><a href="#"><i class="fa fa-twitter"></i></a> 
        </li> 
        <li><a href="#"><i class="fa fa-facebook"></i></a> 
        </li> 
        <li><a href="#"><i class="fa fa-linkedin"></i></a> 
        </li> 
       </ul> 
      </div> 
      <div class="col-md-4"> 
       <ul class="list-inline quicklinks"> 
        <li><a href="#">Privacy Policy</a> 
        </li> 
        <li><a href="#">Terms of Use</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</footer> 

<!-- Portfolio Modals --> 
<!-- Use the modals below to showcase details about your portfolio projects! --> 

<!-- Portfolio Modal 1 --> 
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="close-modal" data-dismiss="modal"> 
       <div class="lr"> 
        <div class="rl"> 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-8 col-lg-offset-2"> 
         <div class="modal-body"> 
          <!-- Project Details Go Here --> 
          <h2>Project Name</h2> 
          <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> 
          <img class="img-responsive img-centered" src="img/portfolio/roundicons-free.png" alt=""> 
          <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p> 
          <p> 
           <strong>Want these icons in this portfolio item sample?</strong>You can download 60 of them for free, courtesy of <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">RoundIcons.com</a>, or you can purchase the 1500 icon set <a href="https://getdpd.com/cart/hoplink/18076?referrer=bvbo4kax5k8ogc">here</a>.</p> 
          <ul class="list-inline"> 
           <li>Date: July 2014</li> 
           <li>Client: Round Icons</li> 
           <li>Category: Graphic Design</li> 
          </ul> 
          <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<!-- Portfolio Modal 2 --> 
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="close-modal" data-dismiss="modal"> 
       <div class="lr"> 
        <div class="rl"> 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-8 col-lg-offset-2"> 
         <div class="modal-body"> 
          <h2>Project Heading</h2> 
          <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> 
          <img class="img-responsive img-centered" src="img/portfolio/startup-framework-preview.png" alt=""> 
          <p><a href="http://designmodo.com/startup/?u=787">Startup Framework</a> is a website builder for professionals. Startup Framework contains components and complex blocks (PSD+HTML Bootstrap themes and templates) which can easily be integrated into almost any design. All of these components are made in the same style, and can easily be integrated into projects, allowing you to create hundreds of solutions for your future projects.</p> 
          <p>You can preview Startup Framework <a href="http://designmodo.com/startup/?u=787">here</a>.</p> 
          <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<!-- Portfolio Modal 3 --> 
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="close-modal" data-dismiss="modal"> 
       <div class="lr"> 
        <div class="rl"> 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-8 col-lg-offset-2"> 
         <div class="modal-body"> 
          <!-- Project Details Go Here --> 
          <h2>Project Name</h2> 
          <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> 
          <img class="img-responsive img-centered" src="img/portfolio/treehouse-preview.png" alt=""> 
          <p>Treehouse is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. This is bright and spacious design perfect for people or startup companies looking to showcase their apps or other projects.</p> 
          <p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/treehouse-free-psd-web-template/">FreebiesXpress.com</a>.</p> 
          <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<!-- Portfolio Modal 4 --> 
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="close-modal" data-dismiss="modal"> 
       <div class="lr"> 
        <div class="rl"> 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-8 col-lg-offset-2"> 
         <div class="modal-body"> 
          <!-- Project Details Go Here --> 
          <h2>Project Name</h2> 
          <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> 
          <img class="img-responsive img-centered" src="img/portfolio/golden-preview.png" alt=""> 
          <p>Start Bootstrap's Agency theme is based on Golden, a free PSD website template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Golden is a modern and clean one page web template that was made exclusively for Best PSD Freebies. This template has a great portfolio, timeline, and meet your team sections that can be easily modified to fit your needs.</p> 
          <p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/golden-free-one-page-web-template/">FreebiesXpress.com</a>.</p> 
          <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<!-- Portfolio Modal 5 --> 
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="close-modal" data-dismiss="modal"> 
       <div class="lr"> 
        <div class="rl"> 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-8 col-lg-offset-2"> 
         <div class="modal-body"> 
          <!-- Project Details Go Here --> 
          <h2>Project Name</h2> 
          <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> 
          <img class="img-responsive img-centered" src="img/portfolio/escape-preview.png" alt=""> 
          <p>Escape is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Escape is a one page web template that was designed with agencies in mind. This template is ideal for those looking for a simple one page solution to describe your business and offer your services.</p> 
          <p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/escape-one-page-psd-web-template/">FreebiesXpress.com</a>.</p> 
          <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<!-- Portfolio Modal 6 --> 
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="close-modal" data-dismiss="modal"> 
       <div class="lr"> 
        <div class="rl"> 
        </div> 
       </div> 
      </div> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-lg-8 col-lg-offset-2"> 
         <div class="modal-body"> 
          <!-- Project Details Go Here --> 
          <h2>Project Name</h2> 
          <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> 
          <img class="img-responsive img-centered" src="img/portfolio/dreams-preview.png" alt=""> 
          <p>Dreams is a free PSD web template built by <a href="https://www.behance.net/MathavanJaya">Mathavan Jaya</a>. Dreams is a modern one page web template designed for almost any purpose. It’s a beautiful template that’s designed with the Bootstrap framework in mind.</p> 
          <p>You can download the PSD template in this portfolio sample item at <a href="http://freebiesxpress.com/gallery/dreams-free-one-page-web-template/">FreebiesXpress.com</a>.</p> 
          <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<!-- jQuery --> 
<script src="vendor/jquery/jquery.min.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="vendor/bootstrap/js/bootstrap.min.js"></script> 

<!-- Plugin JavaScript --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 

<!-- Contact Form JavaScript --> 
<script src="js/jqBootstrapValidation.js"></script> 
<script src="js/contact_me.js"></script> 

<!-- Theme JavaScript --> 
<script src="js/agency.min.js"></script>

乾杯的鏈接。

來源

2016-12-27 nzbru

你也可以做到這一點，而不使用「靈活」

.navbar-collapse{ 
    text-align: center; 
} 

.navbar-nav { 
    float: none; 
    margin: 0 auto; 
    display: inline-block; 
}

Here the Fiddle

來源

2016-12-27 08:01:51 wikijames

乾杯人，工作完美:) – nzbru

@ user3572852謝謝:)我很高興它幫助你。 – wikijames

您將需要重寫一些Bootstrap樣式。您可以使用css3 flexbox來中心對齊導航項目。

以下引導程序樣式被應用在.navbar：

@media (min-width: 768px) 
    .navbar-nav { 
    float: left; 
    } 
}

覆蓋它們在您的自定義樣式表。

@media (min-width: 768px) 
    .navbar-nav { 
    float: none; 
    display: flex; 
    justify-content: center; 
    } 
}

或者，如果你不希望使用flexbox那麼你可以使用下面的CSS：

@media (min-width: 768px) 
    .navbar-nav { 
    float: none; 
    text-align: center; 
    } 
    .navbar-nav>li { 
    float: none; 
    display: inline-block; 
    vertical-align: top; 
    } 
}

更新Fiddle：

來源

2016-12-27 07:51:58

Centering Navbar in Agency- Bootstrap 4 Theme

回答

相關問題