如何用Bootstrap創建3列流體佈局？

Question

對不起，如果這是重複的，但我似乎無法找到我的問題的答案，我有引導困難。

我想爲網頁製作3列布局。我希望每個側邊欄佔用3列並填充該空間，並使中心內容區佔用6個空間。我在網上找到了一個例子並調整了一下，但無法得到我想要的結果。

<div class="container-fluid" id="container"> 
<div class="row-fluid"> 
    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 span-3" > 
     <div class="sidebar-nav-fixed affix" id="Left-Side"> 
      <div class="well"> 
       <ul class="nav "> 
        <li class="nav-header">Sidebar</li> 
        <li class="active"><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li class="nav-header">Sidebar</li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li class="nav-header">Sidebar</li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
       </ul> 
      </div> 
      <!--/.well --> 
     </div> 
     <!--/sidebar-nav-fixed --> 
    </div> 
    <!--/span--> 
    <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 span-6" id="Content"> 
     <div class="jumbotron"> 
      <h1>Hello, world!</h1> 

      <p> 
       This is a template for a simple marketing or informational website. It 
       includes a large callout called the hero unit and three supporting pieces 
       of content. Use it as a starting point to create something more unique. 
      </p> 
      <p> 
       <a class="btn btn-primary btn-lg">Learn more »</a> 
      </p> 
     </div> 

    </div> 
    <!--/span--> 
    <div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 span-3" id="Right-Side"> 
     <div class="sidebar-nav-fixed pull-right affix"> 
      <div class="well"> 
       <ul class="nav "> 
        <li class="nav-header">Sidebar</li> 
        <li class="active"><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li class="nav-header">Sidebar</li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li class="nav-header">Sidebar</li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
        <li><a href="#">Link</a> 
        </li> 
       </ul> 
      </div> 
      <!--/.well --> 
     </div> 
     <!--/sidebar-nav-fixed --> 
    </div> 
    <!--/span--> 
</div> 
<!--/row--> 

這是據我已經得到了。我對使用bootstrap非常陌生，並且不太瞭解如何正確使用它。以防萬一這個問題，我正在做這個項目與ASP.NET。

Answer 1

你的代碼是正確的，佈局渲染，因爲它應該。您的問題是您的側邊欄上的「詞綴」類導致它們摺疊到內容的寬度。你需要這些側邊欄在固定的位置嗎？如果不是，則刪除「詞綴」類。否則，你將不得不給這些容器一個寬度，以填充3列間距。

嘗試這樣的事情......

.sidebar-nav-fixed { 
width: 25%; 
padding-right: 30px; 
}