twitter-bootstrap 如何在初始加载和使用哪个类时将引导程序组件（容器）扩展到完整的窗口宽度和高度？

How to expand bootstrap component(container) to full window width and height on initial load and whitch class to use?

提问by hantonov

I am trying to accomplish exactly something like this: http://www.freshbooks.com/

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

I have a container with a background and a form inside it. I want this container to resize exactly to the width and the height of the window it is opened in. Also, when resizing, it should resize along the window.

我有一个容器，里面有一个背景和一个表格。我希望这个容器能够准确地调整到打开它的窗口的宽度和高度。另外，在调整大小时，它应该沿着窗口调整大小。

I drew it so I can be more clear. This is how I want it to look like:

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

Instead, at the moment it looks like:

相反，目前它看起来像：

I know how to do this with jQuery, it's pretty simple, but if I set a fixed height to the container, the "responsiveness" of bootstrap and of the page is completely lost when I shrink it to a smaller size.

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

I am pretty sure that bootstrap has some build in and ready to use functionality for doing this, but obviously I can't find it.

我很确定 bootstrap 有一些内置并准备好使用功能来执行此操作，但显然我找不到它。

Also, I am having trouble to center the "Some text and form" components vertically in the gray area.

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

Your help is appreciated!

感谢您的帮助！

回答by ckuijjer

There should be no need for jQuery or JavaScript. This can be done using only CSS.

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

You can use .container-fluidinstead of .containerto have it span almost the entire width of the window. The columns inside it will have a small gutter of 15px to the left and right though. But as you'll likely add the background-coloron the .container-fluidthis shouldn't be a problem.

您可以使用.container-fluid而不是.container让它几乎跨越窗口的整个宽度。尽管如此，它里面的列将有一个 15px 的小间距。但是因为您可能会添加background-color，.container-fluid这应该不是问题。

Put all content that should take up the entire height of the window inside the .container-fluidand add a heightproperty to it. Either 100vh, 100% of the view height. If that doesn't work due to browser support (e.g. you need to support IE8) give it a height of 100%and make sure that all its parents (at least htmland body) also get a height: 100%.

将所有应该占据窗口整个高度的内容放在里面，.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>

If it's only about showing a small form horizontally and vertically centered in the entire width and height of the screen, I suggest not using the .container-fluidbut the regular .container. From your screenshots it seems that you don't want the form to take up the entire width of the screen. Surround the .containerwith a divthat has its background-colorset.

如果是只有约呈小形式在屏幕的整个宽度和高度水平，垂直居中，我建议不要使用.container-fluid，但常规.container。从您的屏幕截图来看，您似乎不希望表单占据屏幕的整个宽度。.container用div具有其background-color设置的a环绕。

Create a Bootstrap grid that contains the form (in my example I've used .col-xs-6.col-xs-offset-3to have a half width column in the center of the screen. Give this column the height: 100vhto make it take up the entire height of the screen. The horizontal centering is now done.

创建一个包含表单的 Bootstrap 网格（在我的示例中，我曾经.col-xs-6.col-xs-offset-3在屏幕中央有一个半宽列。给这列height: 100vh使其占据屏幕的整个高度。水平居中现在是完毕。

Vertical centering is done by positioning the form absolutely, pushing it down top: 50%of the height of its container (the column has position: relative) and pulling it transform: translateY(-50%)of its own height up. See css-tricks.com/centering-css-complete-guide/ for more information

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

The 100vhmight conflict with your navbar. Take it outside of the regular document flow by either make it fixed by adding .navbar-fixed-topor position it absolutely.

在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>