如何使用 Twitter Bootstrap 获得三列布局？答案

【问题标题】：How do I get a three column layout with Twitter Bootstrap?如何使用 Twitter Bootstrap 获得三列布局？
【发布时间】：2014-12-07 19:06:11
【问题描述】：

我正在尝试创建如下所示的三列布局：

http://www.manisheriar.com/holygrail/index.htm

应该是fixed width - fluid width - fixed width 布局。

使用Twitter Bootstrap，左侧边栏和流畅的内容效果很好。但我也需要添加一个right sidebar。

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

试试这个：http://jsfiddle.net/andresilich/6vPqA/2/

CSS

.container-fluid > .sidebar {
    position: relative;
    top: 0;
    left:auto;
    width: 220px; /* width of sidebar */
}

.left {
    float:left;
}

.right {
    float:right;
}

.container-fluid > .content {
    margin: 0 240px; /* width of sidebars + 10px of margin */
}

HTML

<div class="sidebar left">
    <div class="well">
      <h5>Sidebar</h5>
      .....
    </div>
</div>

<div class="sidebar right">
    <div class="well">
      <h5>Sidebar</h5>
      .....
    </div>
</div>

每个 cmets，我更新了我的答案，以便仅通过一个类就可以在左右侧边栏之间切换。

现在您可以在<div class="content"> div 中使用以下内容：

CSS

.fixed-fluid {
    margin-left: 240px;
}
.fluid-fixed {
    margin-right: 240px;
    margin-left:auto !important;
}
.fixed-fixed {
    margin: 0 240px;
}

演示：http://jsfiddle.net/andresilich/6vPqA/3/show/ 编辑：http://jsfiddle.net/andresilich/6vPqA/3/

另一位用户询问此方法是否可以适应最新版本的引导程序（撰写本文时为 v2.0），所以这里有一个使用它的演示：

http://jsfiddle.net/andresilich/6vPqA/13/

【讨论】：

效果很好。谢谢。我给了你答案，但我想再问一个相关的问题。我将如何“禁用”右侧边栏以便内容可以填充到右侧？这样我就可以在fixed-fluid-fixed 和fixed-fluid 之间进行选择？再次感谢。
@cbmeeks 实施了你的建议，更新了我上面的答案，这里是调整的小提琴：jsfiddle.net/andresilich/6vPqA/3/show
嗨安德烈斯，非常感谢。我用 twitter bootstrap v2.0 更新了它，但它无法工作。 clearfixes 似乎把事情搞砸了。你知道怎么解决吗？
@JonathanOng 稍作调整，我们就可以让它工作。试试这个使用最新 bootstrap 2.0 css 的版本：jsfiddle.net/andresilich/6vPqA/13
@Viliam 您基本上可以将诸如此类的答案视为起点，我认为通过一些工作可以实现您正在寻找的布局。

【解决方案2】：

对于任何感兴趣的人，这里是最新 Bootstrap 3 版本的示例...

http://bootply.com/101100

您只需将.sidebar-nav-fixed 添加到左右col-md-3 列内的DIV：

.sidebar-nav-fixed {
    width:20%;
}

【讨论】：

它似乎不起作用。侧边栏实际上并没有固定。如果你扩大页面宽度，侧边栏会变大，左边的会放在内容后面。

【解决方案3】：

这是我能找到的最好的。

http://www.bootply.com/9logoZy2fv

代码如下：

   <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <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>
      <a class="brand" href="http://bootply.com">Bootply</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Responsive</a></li>
          <li><a href="#">Layout</a></li>
          <li><a href="#">Example</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
          <!--sidebar-->
          <div class="sidebar-nav-fixed" data-spy="affix" data-offset-top="140">
          <ul class="nav nav-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Responsive</a></li>
            <li><a href="#">Layouts</a></li>
            <li class="divider"></li>
            <li><a href="#">Bootstrap</a></li>
            <li><a href="#">Resources</a></li>
            <li><a href="#">Modal</a></li>
            <li><a href="#">Carousel</a></li>
            <li class="divider"></li>
            <li><a href="#">Typeahead</a></li>
            <li><a href="#">Themes</a></li>
            <li><a href="#">Template</a></li>
            <li><a href="#">Affix</a></li>
            <li class="divider"></li>
            <li><a href="#">Bootstrap 3</a></li>
            <li><a href="#">Sidebar</a></li>
            <li><a href="#">Grid</a></li>
            <li><a href="#">Column</a></li>
            <li class="divider"></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>
          </ul>
          </div>
        </div>
        <div class="span3">

          <!--2nd column-->
          <div id="midCol" data-spy="affix" data-offset-top="250">

            <img src="//placehold.it/300x150/449955/FFF">
            <h4 class="caption">Image Caption <span class="pull-right"><i class="icon-twitter"></i></span></h4>  

            <hr>

            <img src="//placehold.it/300x150/2255EE/EEE">
            <h4 class="caption">Image Caption</h4>  

            <hr>

            <img src="//placehold.it/300x150/992233">
            <h4 class="caption">Image Caption</h4>  

            <hr>

            <img src="//placehold.it/300x150/555555/FFF">
            <h4 class="caption">Image Caption</h4>  

            <hr>

            <img src="//placehold.it/300x150/d9d9d9/EEE">
            <h4 class="caption">Image Caption</h4>  

            <hr>


          </div><!--/middleCol-->

        </div><!--/span3-->
        <div class="span7">

        <div class="well"><h1>3-Column Layout</h1><p>This is a template example that uses the Bootstrap framework to create a responsive three-column layout.
          The left column (narrow) contains a sidebar, the center column (mid) contains features with image/caption, and the right column (widest) contains content.

        </p>
        <a href="http://www.bootply.com/63275" class="btn btn-primary">Details</a>
        <span class="badge pull-right">100</span>
        </div>

        <div class="well"><h1>Affix</h1><p>This layout utilizes the <b>Bootstrap Affix</b> component using data attributes. You can see
        the Affix plugin in action as you scroll down the page. The leftmost side is "pinned" until 140px is reached, and the middle column is un-pinned once 250px is reached.
        See the CSS <code>.affix</code> and <code>.affix-top</code> classes to see how this works.  
        </p>
        <button class="btn">Details</button>  
        </div>

        <div class="well"><h1>Bootply</h1><p>This example layout is compliments of Bootply -- the Bootstrap playground. 
        Bootply lets you play with JavaScript, HTML, CSS and Bootstrap in a simple Web-based editor. Bootply enables you to 
        easily include popular libraries, plugins, extensions and frameworks such as jQuery, FontAwesome, AngularJS, FuelUX and Google Maps.
        </p>
        <a href="http://www.bootply.com" class="btn">Details</a>  
        </div>

        <div class="well"><h1>HTML5 / CSS3</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
        dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        <a href="http://www.bootply.com/63275">Edit this on Bootply</a>.</p>
        <button class="btn">Details</button>  
        </div>

        <div class="well"><h1>Snippets</h1><p>Bootply is also a collaborative tool that enables sharing of snippets. There is a repository of more than 1000 Bootstrap-ready code snippets. Find
        code snippets demonstrate common Bootstrap components such as the carousel (sliders), modal, typeahead, navbar, typography, buttons, tabs and icons.</p>
        <a href="http://www.bootply.com" class="btn">Details</a> 
        </div>

          <div class="well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
        Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
        dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
        Aliquam in felis sit amet augue.</p>
        <button class="btn">Details</button>  
        </div>


        </div>
    </div>
</div>

和 CSS：

body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}

/* uncomment this section to make the sidebar un-pin
.affix-top {
    top:60px;
    position:fixed;
}

.affix {
    position:static;
}
*/

.affix-top {
    top:60px;
    position:fixed;
}

/* custom theme */

#midCol.affix-top {
    position:fixed;
    margin-left:-18px;
    margin-right:10px;
}

#midCol.affix-bottom {
    position:static;
}

#midCol.affix {
    position:static;
}

@media (max-width:1190px) {
  .affix,.affix-top,#midCol.affix,#midCol.affix-top {
      position:static;
  }
}

.caption {
    background-color:#eee;
    padding:10px;
    margin:0;
    color:#555;
}

【讨论】：

能否把相关代码贴在这里，以防链接失效？
当然，刚刚添加。 @威尔

【解决方案4】：

给你：

http://www.bootply.com/aEFO6lrDS8

此解决方案使用具有 3 列的表格布局：左、中、右。 outerTable 的宽度为 100%，左右列具有固定的像素宽度，中间列缩放以填充剩余空间。中间一列有一个 Bootstrap 3 容器，里面有一堆样本 col-xx-1。调整浏览器宽度以查看标准引导网格大小调整过程（即当浏览器宽度小于 1200 等时，col-lg-1 将变为全宽...

顺便说一句，在 bootply 的“渲染”模式下调整浏览器大小会更容易：

http://www.bootply.com/render/aEFO6lrDS8

还有一些引导内容：

【讨论】：