4

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

我正在尝试创建一个类似于A List Apart 上的圣杯布局的响应式布局

左边会有一个固定宽度的列，中间有一个可变宽度的列，然后右边有一个固定宽度的列。右列仅在超过一定宽度的窗口中可见，并且整个事物只会扩展到一定大小。

我创建了一个jsFiddle，它完全符合我的要求。

我的基本 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 布局中组合一些固定和非固定列。

4

1 回答 1

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 （margin-left）mixins/classes，我可以通过使用这些以及围绕中心列内容-offset-的额外包装来实现布局。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-规则；您需要规则中的 0-12-offset-以及中心列外部元素的 -12。左右列源顺序可以通过改变元素来切换float:right。

最后，我发现使用 mixins 更整洁。这是通过重新利用 Bootstrap 的mixins\_grid.scss. 如果您更喜欢使用基于标记和类的 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)

于 2015-08-14T12:58:57.730 回答