文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap2容器最大宽度

问Bootstrap2容器最大宽度
EN

Stack Overflow用户

提问于 2013-10-01 09:34:54

回答 1查看 134关注 0票数 0

我需要用.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>

我理解12列CSS网格逻辑的引导。问题不在于我的跨度不等于12。

现场预览

有没有人？

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-10-01 09:43:21

这是因为除了第一个行外，每一个跨度都使用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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19112754

复制

相似问题

问Bootstrap2容器最大宽度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap2容器最大宽度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap2容器最大宽度
EN