Twitter的引導 - 全寬導航欄

繼TB的例子中，我是一個被標記爲一個導航欄如下：Twitter的引導 - 全寬導航欄

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

我想這橫跨屏幕的整個寬度，並沒有任何圓角 - 類似於導航欄的靜態頂部樣式。

我似乎無法找到如何在結核病中做到這一點。如果沒有辦法，我需要什麼樣的CSS來重寫結核病，而不是破壞響應能力？

來源

2012-10-26 StackOverflowNewbie

我昨天晚上意識到在我提供的解決方案中存在一個錯誤的拼寫錯誤。它現在在[我的答案]中修復（http://stackoverflow.com/a/14736713/61654）。 – ahsteele

把導航欄你的容器：

<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-26 11:24:09 RRikesh

它不能很好地工作：1）仍然有圓角，2）當我調整瀏覽器的大小時出現水平滾動條，3）在小屏幕寬度上，它不再覆蓋瀏覽器的全部寬度。 – StackOverflowNewbie

用我使用過的一些代碼更新了我的答案。您是否包含了響應式CSS和視口元標記？該文檔展示瞭如何實現響應式導航欄http://twitter.github.com/bootstrap/components.html#navs – RRikesh

對不起 - 我認爲我的意思是「流暢」，而不是迴應。我實際上不希望它通過右側的按鈕進入該UI。我會以不同於默認的TB外觀的方式來設計它。如何擺脫圓角？爲什麼我會得到水平滾動條？爲什麼它不能在小屏幕上顯示全寬？ – StackOverflowNewbie

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

請找我這裏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-26 11:28:02 Ravi

rrikesh相同的評論：它不工作：1.）仍然有圓角，2）水平滾動條出現，因爲我調整瀏覽器的大小，3.）在較小的屏幕寬度下，它不再覆蓋瀏覽器的全部寬度。 – StackOverflowNewbie

試試這個小提琴這可能會解決你的問題。 http://jsfiddle.net/meetravi/aXCMW/2/ 1.邊框半徑問題現在已經解決了 2.嘗試溢出：隱藏 3.我不知道我的解決方案將解決it.so讓我知道結果。對於輕微的bootstrap調整，我使用重要的重寫它。我不確定是否有更好的方法來覆蓋它。 – Ravi

＃3沒有解決。你可以在jsFiddle中看到它。在結核病中沒有「原生」的方式來做到這一點？ – StackOverflowNewbie

工作撥弄您可以覆蓋一些CSS

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

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

的!important需要，以防萬一您的自定義CSS後鏈接bootstrap.css。

，並添加您的資產淨值HTML出.container

來源

2012-10-26 13:58:27 silviomoreto

'body'風格會影響網站的其他部分，對吧？我真的只想影響導航欄。我已經喜歡所有其他的填充/邊距。 – StackOverflowNewbie

是的，但你可以設法做到這一點..其他一切都應該是'div.container'，對吧？因此，您可以應用'div.containe'中的'body'風格，例如：'.container padding-left：10px！important; padding-right：10px！important; }' – silviomoreto

的去除邊緣半徑的彎道這種風格添加到您的custom.css文件

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

來源

2012-11-14 16:05:41

不知道，如果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 as an example。

來源

2013-02-06 19:01:46 ahsteele

我知道我對派對有點遲，但是我通過調整CSS使寬度跨度爲100％，並將l/r邊距設置爲0px來解決問題;

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

來源

2014-01-07 21:56:23

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

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

來源

2014-10-10 15:16:46 Chris

只要改變類容器容器全角是這樣的：

<div class="container-fullwidth">

來源

2015-02-20 10:35:26

這不是自舉類嗎？ –

你必須COL-MD-12添加到您的內部導航欄。 md用於桌面。您可以從bootstrap的選項列表中選擇其他選項。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>

來源

2017-02-14 16:55:01

只是<div class="container-fluid">，這與雙方無邊框容器更換<div class="container">。

我認爲這是最好的解決方案，因爲它避免了一些無用的覆蓋並利用內置的類，它很乾淨。

來源

2017-03-22 08:50:49

Twitter的引導 - 全寬導航欄

回答

相關問題