填充剩余屏幕的宽度 space（跨容器）

Question

我正在使用 Bootstrap 4 Alpha 3 (Flexbox enabled version)。

Jsfiddle

body {
  background-color: lightgreen;
}
[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-2">
      AA
    </div>
    <div class="col-xs-10">
      BB
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
      CC
    </div>
    <div class="col-xs-6">
      DD
    </div>
  </div>
</div>

这是现在的样子：

有没有办法（尤其是使用 Flexbox）让 BB 填充剩余屏幕的宽度 space（跨越 container），如下所示？谢谢

Answer 1

BB 元素是一个流入的弹性项目并且被限制在它的容器 (.row) 中。

要使其溢出其父级并占用视口的剩余宽度，您可以尝试这样做：

.container > .row:first-child > .col-xs-10 {   /* 1 */
  position: absolute;                          /* 2 */
  width: 100%;                                 /* 3 */
  margin-left: 16.7%                           /* 4 */
}

.container > .row:first-child {
  position: relative;                          /* 5 */
}

body {
  background-color: lightgreen;
}

[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-2">AA</div>
    <div class="col-xs-10">BB</div>
  </div>
  <div class="row">
    <div class="col-xs-6">CC</div>
    <div class="col-xs-6">DD</div>
  </div>
</div>

revised fiddle

备注：

定位 BB 元素。
从 document flow
任意全宽
将 BB 放置在 AA 的右侧（宽度为 flex: 0 0 16.66667%）
使容器成为绝对定位子项的边界框 (nearest positioned ancestor)。

当然，此方法的（潜在）问题是第 3 项。

因为 BB 是相对于其父级绝对定位的，所以我们不知道到视口边缘的确切长度。提供太多宽度会导致出现水平滚动条，如我的示例所示。

一种解决方法是将 overflow-x: hidden 应用于 body 元素，这将删除滚动条，只需在视口边缘剪裁 BB。

或者我们可以从父对象中删除 position: relative，从而使 BB 相对于视口。此方法可以将 BB 精确调整到视口边缘，但以第 4 项为代价：margin-left 将不再精确。

但让我们试一试：

编辑：除了 margin-left 不足之外，此方法还有另一个缺陷。我没有删除示例，而是保留它用于学习目的。看看你能不能在到达终点之前找到问题:-)

.container > .row:first-child > .col-xs-10 {   
  position: absolute;                          
  width: 75%;                                  /* 6 */
  margin-left: 25%;                            /* 6 */
  left: 0;                                     /* 6 */
}

.container > .row:first-child > .col-xs-2 {    /* 7 */
    flex-grow: 1;
}

body {
  background-color: lightgreen;
}

[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-2">AA</div>
    <div class="col-xs-10">BB</div>
  </div>
  <div class="row">
    <div class="col-xs-6">CC</div>
    <div class="col-xs-6">DD</div>
  </div>
</div>

revised fiddle

备注：

BB 的大小、对齐和位置相对于 初始包含块（即视口）。
AA，其在原始代码中的大小为 flex: 0 0 16.666667%，被赋予 flex-grow: 1 以填补其自身与 BB 之间的任何空白。

现在 BB 正好在视口边缘结束。但是，我们不得不稍微调整 AA "flex" 以防止由于 BB margin-left 不精确而导致的任何间隙。

编辑：上述方法的问题是：因为 BB 是绝对定位的，所以它已从文档流中删除。这意味着 AA 甚至不知道它的存在。因此，AA 上的 flex-grow 会将其一直扩展到容器的边缘，而不是 BB 的开头。.

其他备选方案包括：

使容器全宽，然后管理弹性项目的长度和边距。（这将涉及对 Bootstrap 框架的重大改动，这就是我没有追求它的原因。）
JavaScript

Answer 2

因为看起来超出容器的背景是纯粹的视觉要求并且它不会包含实际的内容我们可以使用.

中列出的技术

我们绝对将一个 100vw 宽的伪元素放在相关元素后面，并将 overflow-x:hidden 应用于 body，这样我们就不会得到水平滚动条。

body {
  background-color: lightgreen;
  overflow-x:hidden;
  margin:0;
  padding:0;
}
[class^="col"] {
  background: gold;
  border: 1px solid tomato;
}

.expando {
  position:relative;
  }

.expando::after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100vw;
  background:inherit;
  z-index:-1;
  }

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-2">
      AA
    </div>
    <div class="col-xs-10 expando">
      BB
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
      CC
    </div>
    <div class="col-xs-6">
      DD
    </div>
  </div>
</div>

填充剩余屏幕的宽度 space（跨容器）

fill the width of the remaining screen space (across container)

html

css

flexbox

twitter-bootstrap

bootstrap-4