使用 Bootstrap 创建圣杯风格的布局

Question

对不起，如果这个问题已经得到解答，我找不到任何我想要的东西。

我正在尝试创建一个类似于Holy Grail Layout on A List Apart 的响应式布局

左边是固定宽度的列，中间是可变宽度的列，右边是固定宽度的列。右栏只会在超过一定宽度的窗口中可见，整个窗口只会扩大到一定大小。

我创建了一个jsFiddle which does exactly what I want here。

我的基本 HTML 如下所示：

<h1>Window Width: <span></span></h1>
<div id="container">

    <div id="center" class="column">
        <h1>Two</h1>
        <p>Width: <span></span></p>
    </div>

    <div id="left" class="column">
        <h2>One</h2>
        <p>Width: <span></span></p>
    </div>

    <div id="right" class="column">
        <h2>Three</h2>
        <p>Width: <span></span></p>
    </div>

</div>

我的问题是，是否有可能在 Bootstrap 之类的东西中做到这一点。我认为如果可能的话，它可以为我节省一些时间，因为我需要让它在移动设备上运行，但是我不确定如何在单个 Bootstrap 布局中组合一些固定和非固定列。

Answer 1

我最近需要一个 Bootstrap 圣杯布局（3 个响应列，中心列在源排序中排在第一位，任何列都可以包含最长的内容）。

原始标记：

<div class="container">
  <div class="row">

     <div id="center">
       ...
       center column content
       ...
     </div>

    <div id="left">
       ...
       left column content
       ...
    </div>

    <div id="right">
       ...
       right column content
       ...
    </div>
  </div>
</div>

通过添加一组 -inset- (margin-right) mixins/classes 来补充 Bootstrap -offset- (margin-left) mixins/classes，我可以通过使用这些带有额外包装的 div 来实现布局围绕中心栏内容。

装饰标记：

<div class="container">
  <div class="row">

    <div id="center" class="col-xs-12 col-sm-inset--12">
      <div class="col-sm-offset-3 col-md-offset-3 col-md-inset-3 col-lg-offset-2 col-lg-inset-2">
         ...
         center column content
         ...
      </div>
    </div>

    <div id="left" class="col-xs-12 col-sm-3 col-lg-2">
       ...
       left column content
       ...
    </div>

    <div id="right" class="col-xs-12 col-md-3 col-lg-2">
       ...
       right column content
       ...
    </div>
  </div>
</div>

JS 小提琴：https://jsfiddle.net/3n5Lvr84/

这个想法是中心列是 100% 宽度和 -100% 右侧边距，将左右列带到中心列的顶部，并且中心列内部元素为具有以下内容的列腾出空间-offset- 和 -inset- 边距。

我已经在小提琴的 CSS 中包含了完整的编译 -inset- 规则；在-offset- 规则中，您需要 0-12 以及中心列外部元素的 -12。可以通过更改float:right元素来切换左右列源排序。

最后，我发现使用 mixins 更整洁。这是通过重新利用 Bootstrap 的 mixins\_grid.scss 创建的 SASS 风格的插图混合。如果您更喜欢使用基于标记和类的 Bootstrap 响应式网格和/或 LESS，则 LESS 混合和 mixins\_grid-frameword.scss 可以类似地重新使用。

_inset.scss

@mixin make-xs-column-inset($columns) {
  margin-right: percentage(($columns / $grid-columns));
}
@mixin make-sm-column-inset($columns) {
  @media (min-width: $screen-sm-min) {
    margin-right: percentage(($columns / $grid-columns));
  }
}
@mixin make-md-column-inset($columns) {
  @media (min-width: $screen-md-min) {
    margin-right: percentage(($columns / $grid-columns));
  }
}
@mixin make-lg-column-inset($columns) {
  @media (min-width: $screen-lg-min) {
    margin-right: percentage(($columns / $grid-columns));
  }
}

帖子顶部原始标记的圣杯布局（将包装 div 添加到 #center 后）：

_holygrail.scss

@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "_inset.scss";

#center {
  @include make-xs-column(12);
  @include make-sm-column-inset(-12);
  > div {
    @include make-sm-column-offset(3);
    @include make-md-column-offset(3);
    @include make-md-column-inset(3);
    @include make-lg-column-offset(2);
    @include make-lg-column-inset(2);
  }
}

#left {
  @include make-xs-column(12);
  @include make-sm-column(3);
  @include make-lg-column(2);
}

#right {
  @include make-xs-column(12);
  @include make-md-column(3);
  @include make-lg-column(2);
}

.container #right {
  float:right;
}

感谢 https://stackoverflow.com/users/669044/clairesuzy 使用的非响应式圣杯布局理念 (Tanfa flexi_floats)