如何在使用初始载荷和抽动类时将引导程序组件（容器）扩展到整个窗口的宽度和高度？

Question

我正在尝试完成完全像这样的事情：http : //www.freshbooks.com/

我有一个带有背景和表单的容器。我希望此容器将其大小精确地调整为它在其中打开的窗口的宽度和高度。此外，在调整大小时，它应沿窗口调整大小。

我画了它，所以我可以更清楚。这就是我想要的样子：

相反，此刻它看起来像：

我知道如何使用jQuery做到这一点，这很简单，但是如果将容器设置为固定的高度，则当我将其缩小为较小的大小时，引导程序和页面的“响应性”将完全消失。

我很确定bootstrap有一些内置功能，可以立即使用功能来执行此操作，但是显然我找不到它。

另外，我在灰色区域中无法将“某些文本和表单”组件垂直居中。

感谢您的帮助！

Answer 1

不需要jQuery或JavaScript。只能使用CSS来完成。

您可以使用.container-fluid而不是.container让它跨越窗口的几乎整个宽度。不过，其内部的列将在左右各有一个15px的小装订线。但是，您可能会在background-color上添加，.container-fluid这应该不是问题。

将应占据窗口整个高度的所有内容放入中，.container-fluid并height为其添加一个属性。要么100vh是视图高度的100％。如果由于浏览器支持（例如，您需要支持IE8）而无法正常工作，请为其设置高度，100%并确保其所有父项（至少为html和body）也获得一个height: 100%。

.height-full {
  height: 100vh;
}

.bg-dark {
  background-color: #333;
  color: #fff;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid height-full bg-dark">
  <div class="row">
    <div class="col-xs-12">
      <h1>Full width and height</h1>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>Regular content</h1>
    </div>
  </div>
</div>

如果仅是要在屏幕的整个宽度和高度上以水平和垂直方向居中显示一个小表格，我建议不要使用，.container-fluid而是使用regular .container。从屏幕快照看来，您不希望表单占据屏幕的整个宽度。.container用div已background-color设置的包围。

创建一个包含以下形式的Bootstrap网格（在我的示例中，我曾经.col-xs-6.col-xs-offset-3在屏幕中央设置了一个半角列。将该列height: 100vh赋予使其占据屏幕的整个高度。现在，水平居中完成。

垂直居中是通过绝对定位表格，将其向下推到top: 50%容器的高度（该列具有position: relative）并将transform: translateY(-50%)其自身的高度拉高来完成的。有关更多信息，请参见css-tricks.com/centering-css-complete-guide/

在100vh您的导航栏可能会发生冲突。通过添加.navbar-fixed-top或使其绝对固定来使其脱离常规文档流。

.height-full {
  height: 100vh;
}
.bg-dark {
  background-color: #333;
  color: #fff;
}
.vertically-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="bg-dark">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-xs-offset-3 height-full">
        <form class="vertically-center">
          <h1 class="text-center">Some text</h1>
          <div class="row">
            <div class="col-xs-4">
              <input class="form-control" type="text" />
            </div>
            <div class="col-xs-4">
              <input class="form-control" type="text" />
            </div>
            <div class="col-xs-4">
              <button class="btn btn-danger btn-block">Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>Regular content</h1>
    </div>
  </div>
</div>