28

結核の例に従って、次のようにマークアップされたナビゲーション バーがあります。

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

これを画面の全幅に広げ、角を丸くしないようにしたいと思います-ナビゲーションバーの静的な上部のスタイリングに似ています。

TBでこれを行う方法が見つからないようです。方法がない場合、TB をオーバーライドして応答性を損なわないようにするには、どの CSS が必要ですか?

4

11 に答える 11

37

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

<div class="container-fullwidth">
于 2015-02-20T10:35:26.050 に答える
26

クラスがバージョン 2.2.2 より前に利用可能であったかどうかはわかりませんnavbar-static-topが、次の方法で目標を達成できると思います。

<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 をまとめました。

于 2013-02-06T19:01:46.230 に答える
23

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

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

</div>

編集：

これは、レスポンシブナビゲーションバーで行ったものです。コードはドキュメントの本文に適合します。

    <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>
于 2012-10-26T11:24:09.710 に答える
14

私はパーティーに非常に遅れていますが、この回答は Google 検索結果のトップに表示されます。

Bootstrap 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>
于 2014-10-10T15:16:46.830 に答える
1

コンテナをナビゲーションバーに押し下げる必要があります。

ここで私の作業フィドルを見つけてください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>
于 2012-10-26T11:28:02.197 に答える
0

あなたはいくつかのcssをオーバーライドすることができます

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

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

カスタムcssの後にリンク!importantする場合に備えて必要です。bootstrap.css

そして、からあなたのnavhtmlを追加します.container

于 2012-10-26T13:58:27.447 に答える
0

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

    .navbar-inner{
       -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
    }
于 2012-11-14T16:05:41.527 に答える
0

col-md-12 をインナー ナビゲーション バーに追加する必要があります。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>
于 2017-02-14T16:55:01.307 に答える