如何用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; 
}