twitter-bootstrap Bootstrap 跨度分成一个新行,不与连续的其他跨度对齐

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17843016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:41:07  来源:igfitidea点击:

Bootstrap span breaking into a new line, not aligning with other spans in a row

csstwitter-bootstrap

提问by randombits

I have some simple markup that looks like the following:

我有一些简单的标记,如下所示:

<div class="row" id="features">
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-trophy"></i></div>
            <h3>some header</h3>
            <p>some text</p>
        </div>        
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-comments"></i></div>
            <h3>some header</h3>
            <p>some text.</p>
        </div>       
        <div class="span3 divider">
            <div class="featureicon"><i class="icon-male"></i></div>
            <h3>another header</h3>
            <p>more text</p>
        </div>
         <div class="span3 divider">
            <div class="featureicon"><i class="icon-wrench"></i></div>
            <h3>yet another header</h3>
            <p>some more text</p>
          </div>
        <div class="span3">
          <div class="featureicon"><i class="icon-male"></i></div>
            <h3>last header</h3>
            <p>last bit of text</p>
        </div>
      </div><!--end row-->

Without me adding that final span3 div, everything looks and feels great. The problem is, I need 5 span's in this row and not 4. There is certainly room on the screen for it to fit, but it just drops to the next row instead. What's the best way to make all five span's in Twitter bootstrap fit on one physical row?

如果没有我添加最后的 span3 div,一切看起来和感觉都很棒。问题是,我在这一行需要 5 个跨度而不是 4 个。屏幕上肯定有空间可以容纳它,但它只是下降到下一行。使 Twitter 引导程序中的所有五个跨度适合一个物理行的最佳方法是什么?

回答by JorgeeFG

spanscan be up to a maximun of 12 combined.

spans最多可以合并 12 个。

So..... 4 4 4, 3 3 3 3, 12, 10 2, etc are possible combinations.

所以..... 4 4 4, 3 3 3 3, 12,10 2等是可能的组合。

See: http://twitter.github.io/bootstrap/scaffolding.html

请参阅:http: //twitter.github.io/bootstrap/scaffolding.html

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

默认的 Bootstrap 网格系统使用 12 列,形成一个 940 像素宽的容器,而没有启用响应功能。添加响应式 CSS 文件后,网格会根据您的视口调整为 724 像素和 1170 像素宽。在 767px 视口以下,列变得流动并垂直堆叠。

You can go here: http://twitter.github.io/bootstrap/customize.htmland customize the quantity of columns. ( I never tried personally )

你可以去这里:http: //twitter.github.io/bootstrap/customize.html并自定义列的数量。(我个人从未尝试过)