4

我的 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 布局，我们不能仅仅为了整合确认消息而放弃整体比例。

4

4 回答 4

2

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

于 2013-10-31T18:46:20.807 回答
1

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

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

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

于 2013-10-31T18:59:42.230 回答
0

在玩了很多 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类。但是：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 网格的功能。但是我已经用几种不同的方式对其进行了测试，如果我在实践中应用它时发现更多，我会更新。

于 2013-11-01T04:41:20.337 回答
0

正如您正确指出的那样，偏移量可用于根据需要进行显示。

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

演示在这里

于 2014-02-06T17:25:19.427 回答