html - Twitter Bootstrap 2 - 全宽行

Question

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

我有我的基本 3 列布局(全部都是，不是我想要的。左右列是流动的，而不是固定宽度)。

问题是“row-fluid”DIV 不会占据屏幕的整个宽度或其父容器会拉伸(stretch)宽度。

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

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%;
     }

编辑:更新代码以反射(reflect)更改。

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。

就是这样!为我工作。我必须指出，由于 CSS 中使用了计算，这仅适用于 CSS3。