twitter-bootstrap Bootstrap：内容跨越多个网格列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19713272/
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
Bootstrap: Content spanning multiple grid columns?
提问by tino
My Bootstrap grid is divided into three columns: a sidebar and two content columns.
我的 Bootstrap 网格分为三列：一个侧边栏和两个内容列。
<div class="col-xs-2">
Sidebar column.
</div>
<div class="col-xs-3">
Left content column.
</div>
<div class="col-xs-7">
Right content column.
</div>
I'd like to display a confirmation message that spans across the two content columns but not the sidebar. Is it possible to do this without altering the bootstrap grid layout?
我想显示跨越两个内容列而不是侧边栏的确认消息。是否可以在不改变引导网格布局的情况下做到这一点？
Example (in ugly HTML tables):
http://jsfiddle.net/jcCUs/
示例（在丑陋的 HTML 表格中）：http:
//jsfiddle.net/jcCUs/
Since the confirmation messages will only be displayed occasionally it doesn't seem ideal to dynamically change the Bootstrap grid layout based on the presence or absence of a message.
由于确认消息只会偶尔显示，因此根据消息的存在或不存在动态更改 Bootstrap 网格布局似乎并不理想。
Many thanks!
非常感谢！
UPDATE:Unfortunately, a solution that requires altering the width and/or proportions of the columns (as suggested below) is not viable. Too many other elements on the page (and website) are based on the existing 2-3-7 layout and we can't scrap the overall proportions just to integrate confirmation messages.
更新：不幸的是，需要改变列的宽度和/或比例（如下所示）的解决方案是不可行的。页面（和网站）上太多其他元素基于现有的 2-3-7 布局，我们不能仅仅为了整合确认消息而取消整体比例。
采纳答案by tino
After a lot of playing around with the Bootstrap grid, my current working solution is below.
在大量使用 Bootstrap 网格之后，我当前的工作解决方案如下。
It's more straight forward than one might expect... you just stack the columns!
它比人们想象的更直接……您只需将列堆叠即可！
<div class="row">
<div class="col-xs-2">
Sidebar (2)
<br><br><br>
</div>
<div class="col-xs-10">
Confirmation Message (10)
</div>
<div class="col-xs-3">
Left Content (3)
</div>
<div class="col-xs-7">
Right Content (7)
</div>
</div>
Demo: http://jsfiddle.net/ravQm/
演示：http: //jsfiddle.net/ravQm/
Some notes:
一些注意事项：
- This works only if the sidebar is taller than the confirmation message, which should usually be the case.
- Bootstrap 3 provides a number of offset, push, and pullclasses that might be very helpful in this situation. However:
Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier.Since we're using "xs" columns in this particular case, they can't be utilized here. But see: http://getbootstrap.com/css/#grid-responsive-resets
- 这仅在侧边栏高于确认消息时才有效，这通常应该是这种情况。
- Bootstrap 3 提供了许多在这种情况下可能非常有用的offset、push和pull类。但是：
Those resets are available for medium and large grid tiers only, since they start only at the (second) small grid tier.由于我们在这种特殊情况下使用“xs”列，因此不能在此处使用它们。但请参阅：http: //getbootstrap.com/css/#grid-responsive-resets
I'm still a little uneasy about this because I'm not sure I have a firm grasp on exactly how the Bootstrap 3 grid functions. But I've tested it a few different ways and will update if I discover more as we apply it in practice.
我对此仍然有点不安，因为我不确定我是否完全掌握了 Bootstrap 3 网格的功能。但我已经测试了几种不同的方法，如果我在实践中应用它时发现更多，我会更新。
回答by Phil Nicholas
You need to wrap the "left" and "right" columns in a 10 sized column, then display them as rows, with the warning message row about it. Like this:
您需要将“左”和“右”列包装在一个 10 大小的列中，然后将它们显示为行，并带有有关它的警告消息行。像这样：
<div class="col-xs-2">
Sidebar column.
</div>
<div class="col-xs-10">
<div class="row" id="confirmation_msg">
<div class="col-xs-12 alert alert-success">
<button class="close" aria-hidden="true" data-dismiss="alert" type="button">×</button>
<strong>Update:</strong> Widths and structure redesigned.
</div>
</div>
<div class="row">
<div class="col-xs-4" style="background-color: #d9edf7;">
Left content column.
</div>
<div class="col-xs-8" style="background-color: #fcf8e3;">
Right content column.
</div>
</div>
</div>
Note that the confirmation message row is ID'd as "confirmation_msg" so you can hide/show it as needed.
请注意，确认消息行的 ID 为“confirmation_msg”，因此您可以根据需要隐藏/显示它。
UPDATE: JSFiddle demo
更新：JSFiddle 演示
回答by Zim
In addition to wrapping the 3 and 7 in a 10 sized column as PhilNicholas suggested, you could change the alertposition to absolute so that it overlays the left and right columns. Otherwise the content will slide up/down when the alert displays.
除了按照 PhilNicholas 的建议将 3 和 7 包裹在一个 10 大小的列中之外，您还可以将alert位置更改为绝对位置，使其覆盖左右列。否则，当警报显示时，内容将向上/向下滑动。
.alert {
position:absolute;
z-index:1;
}
Demo: http://bootply.com/91235
回答by Tiquelou
As you rightly pointed out, offsets can be used to have a display as you desire.
正如您正确指出的那样，偏移量可用于根据需要进行显示。
<div class="row">
<div class="col-xs-2">
<div class="well">col-xs-2</div>
</div>
<div class="col-xs-10 col-sm-offset-2"><div class="alert alert-success">Updated Successfully!</div></div>
<div class="col-xs-3">
<div class="well">col-xs-3</div>
</div>
<div class="col-xs-7">
<div class="well">col-xs-7</div>
</div>
</div>
Demo here
演示在这里
