0

我需要建立一个页面，.container我max-width:750px; 还需要.span4通过添加到相同的行来生成几行.row

如果我添加max-width，.container则.spans 将停止正常运行。如果我使用.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>

我了解引导程序的 12 列 CSS 网格逻辑。问题不在于我的跨度加起来不等于 12。

现场预览在这里

任何人？

4

1 回答 1

1

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

我建议这样做：

<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>
于 2013-10-01T09:43:21.223 回答