css - Bootstrap : Content spanning multiple grid columns?

Question

我的 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>

我想显示一条跨越两个内容列但不跨越侧边栏的确认消息。是否可以在不更改 Bootstrap 网格布局的情况下执行此操作？

示例(在丑陋的 HTML 表格中):
http://jsfiddle.net/jcCUs/

由于确认消息只会偶尔显示，因此根据消息的存在与否动态更改 Bootstrap 网格布局似乎并不理想。

非常感谢!

更新:不幸的是，需要改变列的宽度和/或比例(如下所示)的解决方案不可行。页面(和网站)上有太多其他元素基于现有的 2-3-7 布局，我们不能仅仅为了整合确认消息而放弃整体比例。

Answer 1

您需要将“左”和“右”列包装在一个 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>

请注意，确认消息行的 ID 为“confirmation_msg”，因此您可以根据需要隐藏/显示它。

更新:JSFiddle demo