twitter-bootstrap - 使用 Bootstrap 创建 chalice 风格的布局

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 chalice 布局(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 fiddle : https://jsfiddle.net/3n5Lvr84/

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

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

最后，我发现使用 mixins 更整洁。以下是通过重新利用 Bootstrap 的 mixins\_grid.scss 创建的 SASS 风格的插图混合. LESS mixins 和 mixins\_grid-frameword.scss如果您更喜欢使用基于标记和类的 Bootstrap 响应式网格和/或 LESS，则可以类似地重新调整用途。
_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));
  }
}

帖子顶部原始标记的 chalice 布局(一旦将包装 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 使用的非响应式 chalice 布局理念 (Tanfa flexi_floats)