我不明白Twitter Bootstrap的跨度和跨度

问题描述

我是一个庞大的960网格系统用户，所以我想尝试一下 ，但也许这是一个愚蠢的问题，您可以大笑和否决我，但事实是我不了解跨度和行距。

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

就像，如果我写以下内容

 < 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>第一列< / 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 amet risus。 Etiam porta sem malesuada magna mollis euismod。 Donec sed odio dui。 
< / p> 
< / div> 
< div class = span4> 
< h2>第一列< / 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 amet risus。 Etiam porta sem malesuada magna mollis euismod。 Donec sed odio dui。 
< / p> 
< / div> 
< div class = span4> 
< h2>第一列< / 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 amet risus。 Etiam porta sem malesuada magna mollis euismod。 Donec sed odio dui。 
< / p> 
< / div> 
< / div> 
< / div> 
  

因此，在上面的示例中，我最终得到不成比例的列，左侧第一列中没有空白。如果我在960gs的网格级别上做到这一点，那就太完美了。

Twitter Bootstrap与造成问题的960gs有何不同？

解决方案

原因：

• 容器为940px


• 行为960px，边距为-20px


• span4 300px，边距为20px

当屏幕宽度小于等于940px时，row的-20px和span4的20px边距互相抵消，这就是第一个span4没有左边距的原因。 / p>

twitter bootstrap解决方案：

添加bootstrap-sensitive.css和当屏幕低于980px并超过768px时：

容器变为724px，行744px和span4 228px，并在第一个span4上保留左边界。

I was a huge 960 grid system user, and I thought I would try out Twitter Bootstrap, but maybe it is a stupid question and you can laugh and down vote me but the fact is I don't understand the span and row.

So my problem is, when I create a container, and create spans inside of it, it does not fit next to each other correctly:

Like in 960gs if i write the following

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

I get a perfect 3 column next to each other.

But I cannot achieve this with Twitter Bootstrap, no matter what I do, I always end up with disproportionate columns, so the columns do not fill the container as it supposed to, like with 960gs. If I place 3 columns, then the margin to the right is not correct, or it will not fit correctly in the container.

Boostrap example:

<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, 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, 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>
</div>

So in the example above, I end up with disproportionate columns, there is no margin in the first column to the left. If I do this in 960gs with the grid classes it is perfect.

What is different about Twitter Bootstrap when compared to 960gs that is causing my issue?

解决方案

The reason:

• container is 940px
• row is 960px with a -20px margin
• span4 300px with a 20px margin

when screen width is <=940px, the -20px from row and the 20px margin from span4 cancel each other out, that's why the first span4 has no left margin.

The 'twitter bootstrap' solution:

Add bootstrap-responsive.css and when the screen goes under 980px and beyond 768px:

container become 724px, row 744px and span4 228px, keeping a left margin on first span4.

这篇关于我不明白Twitter Bootstrap的跨度和跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！