Twitter Bootstrap-全寬導航欄

Question

以TB為例，我有一個導航欄，其標記如下：

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

我希望它可以覆蓋屏幕的整個寬度，並且沒有任何圓角-類似於導航欄的靜態頂部樣式。

我似乎無法找到如何在TB中做到這一點。 如果沒有辦法，我需要什么CSS覆蓋TB而不破壞響應能力？

Answer 1

只需將類容器更改為container-fullwidth，如下所示：

<div class="container-fullwidth">

Answer 2

不確定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為例 。

Answer 3

將導航欄移出容器：

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

Answer 4

我參加聚會很晚，但是這個答案在Google搜索結果中名列前茅。

Bootstrap 3對此有一個內置的答案，將導航欄中的容器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>

Answer 5

您需要將容器推入導航欄。

請在這里找到我正在工作的小提琴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>

Answer 6

只需將<div class="container">替換為<div class="container-fluid"> ，這是在兩側都沒有邊距的容器。

我認為這是最好的解決方案，因為它避免了一些無用的重寫，並利用了內置類，這很干凈。

Answer 7

將<nav>元素從<div class='container-fluid'>刪除。 例如： -

 <nav> ......nav content goes here <nav> <div class="container-fluid"> <div> ........ other content goes here </div> </div> 

Answer 8

您可以覆蓋一些CSS

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

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

如果要在bootstrap.css定義css之后鏈接bootstrap.css ，則需要!important 。

並從.container添加您的導航html

Answer 9

要刪除拐角處的邊界半徑，請將此樣式添加到custom.css文件中

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

Answer 10

我知道我參加聚會有點晚了，但是我通過調整CSS使其寬度跨度為100％，並將l / r邊距設置為0px來解決了這個問題。

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

Answer 11

您必須將col-md-12添加到您的內部導航欄中。 md用於桌面。您可以從引導程序的選項列表中選擇其他選項。 col-md-12中的12是全角。如果要半角，可以使用6而不是12。例如col-md-6。

這是您問題的解決方案

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