web-dev-qa-db-ja.com

Twitter Bootstrap-全幅navbar

TBの例に続いて、次のようにマークアップされたnavbarがあります。

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
                   <!-- nav bar items here -->
        </div>
    </div>
</div>

私はこれが画面の全幅に広がり、丸い角を持たないようにしたい-ナビゲーションバーの静的なトップスタイリングに似ています。

TBでこれを行う方法を見つけることができないようです。方法がない場合、TBをオーバーライドし、応答性を壊さないためにどのCSSが必要ですか？

csstwitter-bootstrapnavbar
27
StackOverflowNewbie

クラスコンテナを次のようにcontainer-fullwidthに変更するだけです。

<div class="container-fullwidth">
34
Arnaud Bouchot

navbar-static-topクラスはバージョン2.2.2より前に使用可能でしたが、次の方法で目標を達成できると思います。

<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>
        </ul>
    </div>
</div>
<div class="container">
    ...
</div>

例としてjsFiddle をまとめました。

26
ahsteele

コンテナからnavbarを取り出します。

<div class="navbar">
    <div class="navbar-inner">
               <!-- nav bar items here -->
     </div>
</div>
<div class="container">

</div>

編集：

これがレスポンシブnavbarで行ったものです。コードはドキュメントの本文に適合します。

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <div class="container">

          <!-- .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>

          <!-- Be sure to leave the brand out there if you want it shown -->
          <a class="brand" href="#">Project name</a>


          <!-- Everything you want hidden at 940px or less, place within here -->
          <div class="nav-collapse">
          <!-- .nav, .navbar-search, .navbar-form, etc -->
          <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
            </ul>
          <ul class="nav pull-right">
            <li><a href="#">Log out</a></li>
          </ul>
          </div>

          </div>
        </div>

    </div>
  <div class="container">
    <div class="row">
      <div class="span12">

      </div>
    </div>


  </div> <!-- end container -->
  <script type="text/javascript" src="/assets/js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
16
RRikesh

私はパーティーに非常に遅れていますが、この答えはGoogleの検索結果でトップになります。

ブートストラップ3にはこの組み込みの答えがあり、navbarのコンテナdivをcontainer-fluidに設定すると、画面の幅になります。

そのようです：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">More Stuff</a></li>
      </ul>
    </div>
  </div>
</div>
14
Chris

<nav>から<div class='container-fluid'>要素を取り出します。例：-

<nav>
 ......nav content goes here
<nav>

<div class="container-fluid">
  <div>
   ........ other content goes here
  </div>
</div>
1
Gayathra Nakandala

<div class="container"> with <div class="container-fluid">、これは両側に余白のないコンテナです。

無駄なオーバーライドを回避し、組み込みクラスを使用するため、これが最適なソリューションだと思います。クリーンです。

1
stack_overflower

コンテナをnavbarにプッシュする必要があります。

ここで私の作業フィドルを見つけてください http://jsfiddle.net/meetravi/aXCMW/1/

<header>

    <h2 class="title">Test</h2>
</header>
<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav">
            <li class="active"><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
            <li><a href="#">Test4</a></li>
            <li><a href="#">Test5</a></li>

        </ul>
    </div>
</div>
<div class="container">

</div>
1
Ravi

Col-md-12をinner-navbarに追加する必要があります。 mdはデスクトップ用です。ブートストラップのオプションのリストから他のオプションを選択できます。 col-md-12の12は全幅用です。半角が必要な場合は、12の代わりに6を使用できます。 col-md-6。

ここにあなたの質問の解決策があります

    <div class="container">
       <div class="navbar">
          <div class="navbar-inner col-md-12">
               <!-- nav bar items here -->
          </div>
       </div>
   </div>
0
sanjay mundhra

一部のcssをオーバーライドできます

body {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.navbar-inner {
    border-radius: 0px !important;
}

!importantは、カスタムCSSの後にbootstrap.cssをリンクする場合にのみ必要です。

そして、.containerからnav htmlを追加します

0
silviomoreto

角の境界線半径を削除するには、このスタイルをcustom.cssファイルに追加します

    .navbar-inner{
       -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
    }
0
Joseph N.

私はパーティーに少し遅れていることを知っていますが、CSSを調整して幅のスパンを100％にし、l/rマージンを0pxに設定することで問題を回避しました。

#div_id
{
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}
0
Eleanor Zimmermann