CSS Bootstrap - Выровнять Navbar «Иконки» с краем jumbotron

Question

Я пытаюсь выровнять выбор в навигационной панели с краями jumbotron, так что логотип быстрых кодов выравнивается с краем серого окна в «Новые дополнения», и кнопка «login» выравнивается с правым краем серого окна.

См скриншот текущей страницы:

Код:

td { 
 
    text-align: left; 
 
    vertical-align: central; 
 
\t padding: 4px; 
 
} 
 

 
.products { 
 
\t display: inline-block; 
 
\t margin: 15px; 
 
}

<nav class="navbar navbar-default" > 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a> 
 
    </div> 
 
    <div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="http://www.rapidcodes.co.uk">Home</a></li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Games</a></li> 
 
      <li><a href="#">Memberships</a></li> 
 
      <li><a href="#">Gift Cards</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Games</a></li> 
 
      <li><a href="#">Memberships</a></li> 
 
      <li><a href="#">Gift Cards</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Games</a></li> 
 
      <li><a href="#">Time Cards</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

Попробуйте упаковать свой код внутри внешнего div с классом «контейнер».

<div class="container"><!--Pack your code inside the container--> 
 
<nav class="navbar navbar-default" > 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a> 
 
    </div> 
 
    <div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="http://www.rapidcodes.co.uk">Home</a></li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Games</a></li> 
 
      <li><a href="#">Memberships</a></li> 
 
      <li><a href="#">Gift Cards</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Games</a></li> 
 
      <li><a href="#">Memberships</a></li> 
 
      <li><a href="#">Gift Cards</a></li> 
 
      </ul> 
 
     </li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Games</a></li> 
 
      <li><a href="#">Time Cards</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
</div><!--end container-->

Answer 2

Ваше содержание вероятно, имеет контейнер .container. Также оберните свой навигатор этим.