Центрирование Navbar в агентстве Bootstrap 4 Theme

Question

Мне просто интересно, может ли кто-нибудь помочь мне с проблемой, на которую я застрял некоторое время. То, что я хочу выполнить, - это центрирование меню в верхней части страницы (так что заголовки сервисов и т. Д. Расположены горизонтально по центру). Вот ссылка на установку JSFiddle I

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> 

Приветствия.

Answer 1

Вы также можете сделать это без использования "Flex"

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

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

Here the Fiddle

Answer 2

Вам нужно будет переопределить некоторые стили Bootstrap. Вы можете использовать css3 flexbox для центрирования элементов навигации.

После Bootstrap стили применяются на .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; 
    } 
} 

Update Fiddle: