Question

我需要构建一个.container max-width:750px;的网页我还需要通过添加到同一.span4

来生成多行.row

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

Bootstrap2容器最大宽度

1 个答案: