CSS引导带-使导航条‘图标’与巨型加速器的边缘对齐

Question

我正在尝试将导航条中的选择与巨型加速器的边缘对齐，以便快速代码徽标与“最新添加”中灰色框的边缘对齐，“登录”按钮与灰色框的右侧对齐。

请参见当前页面的屏幕截图：

​

代码：

​

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>

​

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。还用这个包住你的肚脐。