Question

我试图解决我的问题，因为3小时试图替换类......我放弃了。

我想要做的是在屏幕宽度介于768px和979px之间时使导航栏全宽。正如您在jsfiddle上看到的那样，导航栏（调整大小时）不以容器为中心。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <div class="row">
        <div class="span8 offset2">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>

      <a class="brand" href="#">Kipi</a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#"><i class="icon-home"></i> <small>...</small></a></li>
          <li><a href="#"><i class="icon-plus-sign"></i> <small>Contact</small></a></li>
          <li><a href="" title="Grid"><i class="icon-th"></i></a></li>
        </ul>
      </div> <!-- end .nav-collapse -->

    </div>
    </div>
    </div> <!-- end .container -->
  </div>
</div>



<div class="content container">
<div class="row">
  <div class="span8 offset2">
    <section>
      d<br>......
    </section>
  </div>
</div>

.content.container { margin-top: 25px;  }
.content.container .row {  }
.content.container .row .span8 { background: #000;  }
.content.container .row .span8 > section { padding: 50px;  }

我想在768px和979px的屏幕宽度之间显示导航栏全宽任何想法都赞赏。

Answer 1

这应该适合你：

@media (max-width: 979px) and (min-width: 768px) {
  .navbar-inner .span8 {
    width:100%;
    padding-left: 0px;
    padding-right:0px;
  }
  .navbar-inner .offset2 {
    margin-left:10px;
  }
  .navbar .brand {
    padding-left:20px;
  }
  .btn.btn-navbar {
    margin-right:20px;
  }
}

在此处查看此行动：http://jsfiddle.net/QA6Rs/29/

但是，我不确定为什么你需要在导航栏中输入row和span8。检查位于http://twitter.github.com/bootstrap/components.html#navbar的响应式导航栏上的自适应导航栏示例。

768px和979px之间的Bootstrap导航栏未居中

1 个答案: