Twitter Bootstrap 2 - 全宽行答案

【问题标题】：Twitter Bootstrap 2 - Full width rowTwitter Bootstrap 2 - 全宽行
【发布时间】：2014-01-05 17:39:48
【问题描述】：

我昨天问了一个类似问题的问题，但看来我需要做更多的工作。所以我就是这么做的！

我有我的基本 3 列布局（全部是它，不完全是我想要的。左右列是流动的，而不是固定的宽度）。

问题是“行流体” DIV 不会占据屏幕的整个宽度，或者它的父容器会拉伸宽度。

编辑左列和右列都以固定宽度完美放置，但现在中心列不会填满右侧列。

HTML：

<div class="container-full">      
    <div class="navbar navbar-static-top">  
        <div class="navbar-inner blue-bg">
            <a href="#" class="brand"><img src="images/kab/logo-header.png" alt="KAB Logo Large"/></a>
        </div>
    </div>  

    <div class="container-full">    
        <div class="row">

            <div class="span1 blue-bg" style="width: 150px;">
                <h4>Left Column</h4>
            </div>

            <div class="span10">
                <h4>Center Content</h4>
            </div>

            <div class="span1 right blue-bg" style="width: 150px;">
                <h4>Right Column</h4>
            </div>
        </div>
    </div>

    <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner blue-bg" style="height: 77px;"> </div>
    </div>
</div>

CSS：

    .container-full {
         margin: 0 auto;
         width: 100%;
     }

     .full {
          margin: 0 auto;
          width: 100%;
     }

编辑：更新代码以反映更改。

【问题讨论】：

最好提一下您使用的是哪个版本的 Bootstrap。
我想你使用 bootstrap 2，如果你想要全宽使用 row 而不是 row-fluid
@richard 谢谢 - 它的 Twitter Bootstrap 2
@Genocide_Hoax - 是的，它的 v2.3.2。这使得行全宽，但不是右列并不完全正确。有什么想法吗？
在 Bootstrap 3 中，网格系统发生了变化，并且没有行流体。 getbootstrap.com/css/#grid。您正在使用 2.3.2 ，因此建议您使用 row 而不是 row-fluid 或手动浏览到 bootstrap.css 中的部分并删除填充。

标签： html css twitter-bootstrap

【解决方案1】：

解决了！可悲的是，我不得不编辑 bootstrap.css，因为无论我做什么，它总是设置左边距。我确信有办法解决这个问题。

下面的解决方案允许固定 - 流体 - 固定 3 列布局

HTML：

   <div class="container-full"> 
     <div class="row">          
        <div class="span1" style="width: 150px;">
            <h4>Left</h4>
        </div>

        <div class="span10 filler">
            <h4>Center Content</h4>
        </div>

        <div class="span1" style="width: 150px;">
            <h4>Right</h4>
        </div>
     </div>     
   </div>

CSS：

    .filler {
        width: -moz-calc(100% - 300px); /* Firefox */
        width: -webkit-calc(100% - 300px); /* WebKit */
        width: -o-calc(100% - 300px); /* Opera */
        width: calc(100% - 300px); /* Standard */
    }

-300px 值等于固定列宽的总和，在本例中为 150px。

现在，在 bootstrap.css 上转到第 282 行 ([class*="span"]) 并将 margin-left 从 20px 更改为 0px。

就是这样！为我工作。我必须注意，由于 CSS 中使用了 calc，这仅适用于 CSS3。

【讨论】：

为我工作而不破坏线路。只需添加样式“margin-left：0px！important；”在你需要破解的每个 div 上

【解决方案2】：

使用 Bootstrap 2.x，您不需要“容器满”类。 Bootstrap 2.x 具有用于流体布局（全宽）的“container-fluid”类。

您可以结合使用“container-fluid”和“row-fluid”以获得预期结果。

<body>
    <div class = "container-fluid">
      <div class = "row-fluid">    
         <div class="span1" style ="width: 150px;">
             <h4>Left</h4>
         </div>

         <div class="span10">
             <h4>Center Content</h4>
         </div>

         <div class="span1" style="width: 150px;">
             <h4>Right</h4>
         </div>
       </div>
     </div>

【讨论】：