html - Bootstrap2 容器最大宽度

Question

我需要使用 .container 构建一个页面，该页面具有 max-width:750px; 我还需要通过添加到相同的 .row

来生成几行 .span4

如果我将 max-width 添加到 .container，则 .span 将停止正常运行。 如果我使用 .row-fluid，我会得到正确的列宽，但在第一行它们会正确排列，而在第二行它们不会。

<style>
.container { max-width:750px;}
</style> 

<div class="container">
    <div class="row">
        <div class="span4" style="background-color:#F00">1</div>
        <div class="span4" style="background-color:#9F0">2</div>
        <div class="span4" style="background-color:#FF0">3</div>
        <div class="span4" style="background-color:#939">4</div><!-- make new row -->
        <div class="span4" style="background-color:#3CF">5</div> 
        <div class="span4" style="background-color:#F00">6</div> 

    </div>  
</div>



<div class="container" style="margin-top:50px">
    <div class="row-fluid">
        <div class="span4" style="background-color:#F00">1</div>
        <div class="span4" style="background-color:#9F0">2</div>
        <div class="span4" style="background-color:#FF0">3</div>
        <div class="span4" style="background-color:#939">4</div><!-- make new row -->
        <div class="span4" style="background-color:#3CF">5</div>
        <div class="span4" style="background-color:#F00">6</div> 

    </div>  
</div>

我理解 bootstrap 的 12 列 CSS 网格逻辑。问题不在于我的跨度加起来不等于 12。

LIVE PREVIEW HERE

有人吗？

Answer 1

那是因为除了行中的第一个跨度外，每个跨度都采用 margin-left。要解决此问题，请使用自定义 CSS 从第四个跨度中删除 margin-left，或者您可以为每一行设置单独的行类。我建议每一行都有单独的行更好，但这仍然是你的决定。

我建议这样做:

<div class="container">
    <div class="row-fluid">
        <div class="span4" style="background-color:#F00">1</div>
        <div class="span4" style="background-color:#9F0">2</div>
        <div class="span4" style="background-color:#FF0">3</div>
    </div>
    <div class="row-fluid">
        <div class="span4" style="background-color:#939">4</div><!-- make new row -->
        <div class="span4" style="background-color:#3CF">5</div> 
        <div class="span4" style="background-color:#F00">6</div> 
    </div>  
</div>