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 /类来补充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风格的插入混音。如果你喜欢使用标记＆amp;和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));
  }
}

帖子顶部原始标记的圣杯布局（一旦包装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;
}

对于使用的无响应圣杯布局的想法（Tanfa flexi_floats）到https://stackoverflow.com/users/669044/clairesuzy

使用Bootstrap创建圣杯风格布局

1 个答案: