javascript - CSS Bootstrap-将Navbar'Icons'与jumbotron的边缘对齐

我正在尝试将导航栏中的选择与巨无霸的边缘对齐，以便Rapidcodes徽标与“最新添加”中灰色框的边缘对齐，并且“登录”按钮与灰色框的右边缘对齐。 。

查看当前页面的屏幕截图：


码：

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

.products {
	display: inline-block;
	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>

最佳答案

尝试使用“容器”类将代码包装在外部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-->