html – Bootstrap 3导航栏右边距不应该是-15px

发布时间：2020-12-14 21:36:55 所属栏目：资源来源：网络整理

导读：在我的网页我有一个Bootstrap 3导航栏： bodynav class="navbar navbar-default navbar-fixed-top" role="navigation" div class="navbar-header" a class="navbar-brand" href="#"Teachlab/a /div div class="collapse navbar-collapse" id="bs-example-nav

在我的网页我有一个Bootstrap 3导航栏：

<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Teachlab</a>
  </div>

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

    <ul class="nav navbar-nav navbar-right">
      <li><%= link_to "Home",'#' %></li>
      <li><%= link_to "Help",'#' %></li>
      <li><%= link_to "Sign in",'#' %></li>
    </ul>
  </div>
</nav>

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

</body>

问题是导航是靠近屏幕的边缘。如果我从导航栏中删除navbar-fixed-top，它的工作正如我所愿。

任何提示？

解决方法

根据3.1.1使用容器。

结构不正确。 .navbar右边的.collapse容器不在ul上。

样品：http://jsbin.com/eQIROsE/2/edit

<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header">
  <a class="navbar-brand" href="#">Project name</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button> 
  </div>
    <div class="navbar-collapse collapse navbar-right">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
        </ul>
      </div>
      <!--/.navbar-collapse -->
  </div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!