- 首页
- 其他开发
- 为什么 Twitter Bootstrap 让我拥有超过 12 个列?
为什么 Twitter Bootstrap 让我拥有超过 12 个列?
[英] Why does Twitter Bootstrap let me have more than 12 columns?
本文介绍了为什么 Twitter Bootstrap 让我拥有超过 12 个列?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个容器，里面有 2 个 div:span9 和 span3.在我的 span9 div 中，我希望仅限于 9 列.但是，除非我将 span9 中的 div 设置为 span12，否则它会留下 3 个额外的空白列！
到底为什么会发生这种情况?对我来说，span9"应该意味着我有 9 列可用.我根本没有看到我正在使用的任何内容会导致该内容被允许重置为网格中的 12 列.零意义.
解决方案
除了@firtive 的评论之外，嵌套列的代码对于默认响应(非流体)网格或流体网格是不同的.
使用默认网格，使用 class="row" 并且您的案例中的嵌套列数确实应总计 9(其父列的列数).这是因为列具有固定的宽度.
对于流体网格，使用 class="row-fluid" 并且嵌套列的数量应加起来为 12.这是因为列宽会根据他们的父母.
来源 Bootstrap 文档
请参阅下面的示例.
希望能帮到你
默认非流体示例 现场观看
<div class="span9"><div class="row"><!-- 开始嵌套行--><div class="span6">嵌套列</div><div class="span3">嵌套列</div>
<!-- 结束嵌套行-->
<!-- end span 9 parent --><div class="span3">跨度 3
<!-- 结束行-->
流体网格示例 现场观看
<div class="span9"><div class="row-fluid"><!-- 开始嵌套的流体行--><div class="span6">嵌套列</div><div class="span6">嵌套列</div>
<!-- 结束嵌套的流体行 -->
<!-- end span 9 parent --><div class="span3">span 3</div>
<!-- 结束行-->
I have a container that has 2 divs within it: span9 and span3. Inside my span9 div, I would expect to be limited to only 9 columns. However, unless I set the div within the span9 to be a span12, it leaves 3 extra blank columns!
Why on earth would this happen? To me, "span9" should mean that I have 9 columns available. I don't see anything at all that I am using that would cause that content to be allowed to reset to 12 columns in the grid. Makes zero sense.
解决方案
Further to the comment from @firtive, the code for nested columns is different for default responsive (non-fluid) grids or for fluid grids.
With the default grid, use class="row" and the number of nested columns in your case should indeed total 9 (the number of columns of its parent). This is because the columns have a fixed width.
With fluid grids, use class="row-fluid" and the number of nested columns should add up to 12. This is because the column widths vary, based on a percentage of the width of their parent.
Source Bootstrap Docs
See examples below.
Hope this helps
Default non-fluid example see this live
<div class="row">
<div class="span9">
<div class="row"> <!-- start nested row -->
<div class="span6">nested col</div>
<div class="span3">nested col</div>
</div> <!-- end nested row -->
</div> <!-- end span 9 parent -->
<div class="span3">
span 3
</div>
</div> <!-- end row -->
Fluid Grid Example see this live
<div class="row-fluid">
<div class="span9">
<div class="row-fluid"> <!-- start nested fluid row -->
<div class="span6">nested col</div>
<div class="span6">nested col</div>
</div> <!-- end nested fluid row -->
</div> <!-- end span 9 parent -->
<div class="span3">span 3</div>
</div> <!-- end row -->
这篇关于为什么 Twitter Bootstrap 让我拥有超过 12 个列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
