Question

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

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

示例（在丑陋的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

Answer 2

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

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

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

Answer 3

经过大量的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提供了许多偏移，推送和拉类，在这种情况下可能非常有用。但是：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

我对此仍然有点不安，因为我不确定我是否已经掌握了Bootstrap 3网格的确切功能。但是我已经通过几种不同的方式对其进行了测试，并且如果我在实践中应用它时会发现更多。

Answer 4

正如您正确指出的那样，可以根据需要使用偏移来显示。

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

演示here

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

4 个答案: