微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

我不明白twitter bootstrap span和row

我是一个巨大的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上保留左边距。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐