содержания Центра по NavBar - Bootstrap

Я пытаюсь центрировать содержимое Nav Bar, однако, я не могу заставить его работать правильносодержания Центра по NavBar - Bootstrap

Я думаю, что все, кажется, более левый край, чем центр, но я гавань б поплавка: левое в любом месте

Я пытаюсь Сосредоточьте изображения и навигацию

Код:

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Soni's Computer Repair</title> 
     <meta name="viewport" content="width=device-width, inital-scale=1.0"> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href="css/styles.css" rel="stylesheet"> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

     <script src="js/bootstrap.js"></script> 

    </head> 

    <body> 
     <div class="navbar navbar-inverse navbar-static-top"> 

      <div class="container"> 
       <a class="navbar-brand"><img src="Final.png"/></a> 

       <div class="navbar-header"> 
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 


       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">Services</a></li> 
         <li><a href="#">About Us</a></li> 
         <li><a href="#">Contact Us</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 

     <footer class="footer"> 
      <div class="container"> 
       <h6 class="text-center">Copyright &copy; Soni Computer Repairs</h6> 
       <p class="text-center">www.SoniRepairs.com</p> 
      </div> 
     </footer> 
    </body> 
</html>

CSS: Это код CSS

.nav, .navbar-nav { 
    text-align: center; 
} 

.container img { 
    height:100%; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
} 

.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
    background-color: #f5f5f5; 
} 

@media screen and (max-width: 500px) { 

    .navbar-nav, .container img{ 
     margin-left: auto; 
     margin-right: auto; 
     display: table; 
     table-layout: fixed; 
     float:none; 
    } 

    .navbar-brand { 
     position: absolute; 
     width: 100%; 
     left: 0; 
     text-align: center; 
     margin: auto; 
    } 
}

источник

2015-05-17 RandomMath

Возможный дубликат: http://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar – odedta

HTML: Я переехал NavBar-бренд внутри ул

<div class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;"> 
    <ul class="nav navbar-nav"> 
     <a class="navbar-brand"><img src="Final.png"></a><li><a href="#">Home</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 
</div>

CSS: Я добавил эти 3 строки

@media (min-width: 768px) { 
    .navbar-nav { float: none; } 
    .navbar-nav>li { float: none; display: inline-block; } 
    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { float: none; display: inline-block; } 
}

Это работает эта путь для меня. Enjoy =)

источник

2015-05-18 08:19:25 LightBen

содержания Центра по NavBar - Bootstrap

ответ

Смежные вопросы