问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

在我的网页中，我有一个 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 ，它就会按我的意愿工作。

有什么提示吗？

原文由 user468311 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcsstwitter-bootstrap-3
阅读 211
1 个回答
得票最新
社区维基
1

从 3.1.1 开始使用 .container-fluid。

结构不正确。 .navbar-right 在 .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>

原文由 Christina 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏