Question

我昨天提出了一个类似问题的问题，但似乎我需要做更多的腿部工作。那就是我做的！

我有基本的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%;
     }

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

Answer 1

解决！可悲的是，我不得不编辑bootstrap.css，因为它总是设置margin-left而不管我做了什么。我相信这有一个方法。

下面的解决方案允许固定的流体固定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。

多数民众赞成！为我工作。我必须注意，这只适用于CSS3，因为CSS中使用了calc。

Answer 2

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

您可以将“容器 - 液体”和“排液”结合起来，以达到预期效果。

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

查看更多：http://getbootstrap.com/2.3.2/scaffolding.html#layouts

Twitter Bootstrap 2 - 全宽行

2 个答案: