我不明白twitter bootstrap span和row

发布时间：2020-12-18 00:01:58 所属栏目：安全来源：网络整理

导读：我是一个巨大的960网格系统用户，我认为我会尝试 Twitter Bootstrap，但也许这是一个愚蠢的问题，你可以笑和投票我，但事实是我不明白的跨度和行。所以我的问题是，当我创建一个容器，并在其中创建跨度，它不适合彼此正确：像960gs如果我写下面的 div clas

我是一个巨大的960网格系统用户，我认为我会尝试 Twitter Bootstrap，但也许这是一个愚蠢的问题，你可以笑和投票我，但事实是我不明白的跨度和行。

所以我的问题是，当我创建一个容器，并在其中创建跨度，它不适合彼此正确：

像960gs如果我写下面的

<div class="container_12">
  <div class="grid_4"></div>
  <div class="grid_4"></div>
  <div class="grid_4"></div>
</div>

我得到一个完美的3列彼此相邻。

但我不能实现这与Twitter Bootstrap，不管我做什么，我总是最终与不成比例的列，所以列不填充容器，因为它应该，像960gs。如果我放置3列，则右边缘不正确，或者它不会正确地放在容器中。

Boostrap示例：

<div class="container">
    <div class="row">
        <div class="span4">
            <h2>Column one</h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus,tellus ac cursus commodo,tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
        </div>  
        <div class="span4">
            <h2>Column one</h2>
            <p>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
            </p>
        </div>  
    </div>  
</div>

所以在上面的例子中，我最终得到不成比例的列，左边第一列没有边距。如果我这样做在960gs与网格类，它是完美的。

有什么不同的Twitter Bootstrap相比，960gs是导致我的问题？

解决方法

原因：

> container是940px
>行为960px，边距为-20px
> span4 300px，边距为20px

当屏幕宽度为<= 940px时，行中的-20px和来自span4的20px的边距彼此抵消，这就是为什么第一个span4没有左边距。 ‘twitter bootstrap’解决方案：添加bootstrap-responsive.css，当屏幕在980px以下超过768px：容器变为724px，行744px和span4 228px，在第一个span4上保留左边距。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!