javascript - 如何在初始加载和使用哪个类时将 Bootstrap 组件(容器)扩展到全窗口宽度和高度？

Question

我正试图完成这样的事情: http://www.freshbooks.com/

我有一个容器，里面有一个背景和一个表单。我希望此容器的大小完全调整为打开它的窗口的宽度和高度。此外，在调整大小时，它应该沿窗口调整大小。

我把它画出来是为了让我看得更清楚。这就是我想要的样子:

相反，目前它看起来像:

我知道如何用 jQuery 做到这一点，这很简单，但是如果我为容器设置一个固定的高度，当我将它缩小到更小的尺寸时， Bootstrap 和页面的“响应能力”就会完全消失。

我很确定 bootstrap 有一些内置的功能可以用来做这件事，但显然我找不到它。

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

感谢您的帮助!

Answer 1

应该不需要 jQuery 或 JavaScript。这可以仅使用 CSS 来完成。

您可以使用 .container-fluid 而不是 .container 来让它几乎占据整个窗口的宽度。尽管其中的列在左侧和右侧会有一个 15px 的小间距。但由于您可能会在 .container-fluid 上添加 background-color，所以这应该不是问题。

将所有应占据整个窗口高度的内容放入 .container-fluid 并向其添加 height 属性。 100vh，100% 的 View 高度。如果由于浏览器支持(例如，您需要支持 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 而使用常规的 .container。从您的屏幕截图看来，您似乎不希望表单占据屏幕的整个宽度。用设置了 background-color 的 div 包围 .container。

创建一个包含表单的 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>