Bootstrap：如何跨越多个网格列的内容？

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布局，我们无法放弃整体比例以集成确认消息。

- tino

Answer 1

您需要将“left”和“right”列包裹在一个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演示。

- Phil Nicholas

---

不客气，@tino。我没有在示例中放置它（因为你没有问），但是一个BootStrap“警告”可能看起来很好。http://getbootstrap.com/javascript/#alerts - Phil Nicholas

哎呀，@PhilNicholas，我说得太早了！我在实践中尝试了一下，如果我理解正确的话，似乎Bootstrap期望每个嵌套行内所有列的总和加起来为12。换句话说，仅仅确保内部列（7+3）的总和等于包装列（10）的值似乎不起作用，因为Bootstrap期望内部列总和为12。这会破坏列的比例。希望这个过于复杂的演示可以更好地解释我的意思。http://jsfiddle.net/st72T/1/ - tino

Tino，这是一个更新的JSFiddle，其中包含原生BS3警报：http://jsfiddle.net/wXV3Q/ 用户单击“X”关闭成功消息时，该行将消失，将内容列恢复到其正常位置。此外，要明确的是，我发布的解决方案没有浮动或覆盖，因为这不符合您在所发布的问题中展示的基于HTML表格的设计要求。 - Phil Nicholas

在子行的总计方面，你发现得很好。我已经更新了发布的答案以进行更正。我仍然强烈建议使用本地BS3警报（带或不带淡出动画，由您决定）。 - Phil Nicholas

不幸的是，这还不够，即使现在它正确地求和，列的比例也已经改变。 相对于包装列，左边现在是4/12而不是3/10。 右边是8/12而不是7/10。 - tino

Answer 2

除了像PhilNicholas建议的那样将3和7包装在10大小的列中，您还可以将alert位置更改为绝对定位，以便它覆盖左右两个列。否则，当警报显示时，内容将上下滑动。

.alert {
    position:absolute;
    z-index:1;
}

演示：http://bootply.com/91235

- Carol Skelly

Answer 3

正如您所指出的那样，偏移量可以用于实现您所需的显示效果。

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

演示 这里

- Tiquelou

---

你在类属性“col-sm-offset-2”中有一个错别字，请删除前面的点。 - anddam

Answer 4

在尝试了很多Bootstrap网格的玩耍后，我目前的工作解决方案如下。

它比人们预期的更加直接...你只需要将列堆叠起来！

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

演示：http://jsfiddle.net/ravQm/

一些注意事项：

• 这只在侧边栏比确认消息更高时才有效，这通常应该是这种情况。
• Bootstrap 3提供了许多offset、push和pull类，在这种情况下可能非常有用。然而：这些重置仅适用于中等和大型网格层，因为它们仅从第二个小网格层开始。由于我们在这种特殊情况下使用的是“xs”列，因此无法在此处使用它们。但请参见：http://getbootstrap.com/css/#grid-responsive-resets

我仍然有点不安，因为我不确定Bootstrap 3网格如何运作。但我已经以几种不同的方式进行了测试，并将在实践中应用它时发现更多内容时进行更新。

- tino

---

更新：这个方法非常有效，问题已经解决！它保持了现有的布局，并按预期将确认消息堆叠在两个内容列的顶部，没有任何明显的副作用。 - tino