0

Just look at this: http://jsfiddle.net/QA6Rs/1/

I'm trying to solve my problem since 3h trying to replace classes.. and I give up.

What I'm trying to do is to make navbar full-width when screen width is between 768px and 979px. As you can see on jsfiddle, the navbar (when resizing) is not centered with the container.

<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;  }

I would like to display navbar full-width between 768px and 979px of screen width Any ideas appreciated.

4

1 回答 1

0

这应该适合你：

@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的响应式导航栏中检查响应式导航栏示例。

于 2013-01-28T20:07:18.567 回答