0

これを見てください：http： //jsfiddle.net/QA6Rs/1/

クラスを置き換えようとしている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までの全幅のナビゲーションバーを表示したいと思います。

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のResponsivenavbarでResponsiveNavbarの例を確認してください。

于 2013-01-28T20:07:18.567 に答える