Question

您好我在顶部导航栏上对齐徽标时遇到问题。它工作在小视图，但当我伸展它时，徽标向右移动。我希望徽标一直向左，并留在小屏幕或大屏幕上。

我尝试过.text-left和pull-left但似乎没什么用。

我正在使用bootstrap。到目前为止，这是我的代码。

谢谢！

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TITLE GOES HERE</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top" style="background-color: #1C2D8E">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="text-left" id="logo" href="#">LOGO GOES HERE</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="../navbar/">Settings</a>
          </li>
          <li><a href="../navbar-static-top/">Support</a>
          </li>
          <li class="active"><a href="./">Help<span class="sr-only">(current)    </span></a>
          </li>
          <li><a href="../navbar-static-top/">Logout</a>
          </li>
        </ul>

      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

  <!-- JQuery (necessary for Bootstrap's javascript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>

</body>

</html>

＆＃13;

Answer 1

根据要保留的文档，使用navbar-brand类。

替换

 <a class="text-left" id="logo" href="#">LOGO GOES HERE</a>

与

 <a class="navbar-brand" id="logo" href="#">LOGO GOES HERE</a>

删除包装容器标签：

 <div class="container"></div>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TITLE GOES HERE</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top" style="background-color: #1C2D8E">
       <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" id="logo" href="#">LOGO GOES HERE</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="../navbar/">Settings</a>
          </li>
          <li><a href="../navbar-static-top/">Support</a>
          </li>
          <li class="active"><a href="./">Help<span class="sr-only">(current)    </span></a>
          </li>
          <li><a href="../navbar-static-top/">Logout</a>
          </li>
        </ul>

      </div>
      <!--/.nav-collapse -->
  </nav>

  <!-- JQuery (necessary for Bootstrap's javascript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>

</body>

</html>

Bootstrap左对齐导航问题

1 个答案: