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

hantonov 发表于 Dev

hantonov

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

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

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

在此处输入图片说明

相反，此刻它看起来像：

目前的状况

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

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

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

感谢您的帮助！

克杰耶

不需要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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-19

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

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

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

如何在引导程序中获取窗口的高度和宽度

在容器div内时将div扩展到页面的整个宽度

如何将main div扩展到整个浏览器窗口高度？

如何使用CSS将包装元素扩展到整个浏览器宽度？

使用引导程序标签时，如何固定Google图表的高度和宽度？

将主体元素的宽度扩展到超出窗口的宽度

移至下一行时，将图像扩展到容器宽度

CSS：将文本背景扩展到容器宽度

扩展容器的高度和宽度在100％

如何将伪背景色扩展到中心容器之外而不是屏幕宽度？

将卡片视图高度扩展到包含的exoplayer的高度，仅裁剪expoplayer的左侧和右侧

颤振如何使容器扩展到最大高度

如何设置 OutlineButton 宽度 > 子宽度和边框扩展到所有可用空间？

打开窗口时如何在不使用参数的情况下指定R中绘图的宽度和高度

如何在WPF中根据窗口的宽度和高度调整控件的宽度和高度

如何使用 Moore 和 Von Nuemman 示例中的代码将邻居函数扩展到 24

使用引导响应网格系统时如何为图像提供动态宽度和高度

从Zeplin到网站的组件的高度和宽度

如何将 UWP 应用程序的窗口扩展到多个屏幕

使用jLayout保持容器的宽度和高度

使用TailwindCSS将元素的高度扩展到页面底部

如何固定WPF窗口的高度和宽度

使用扩展将Swift类扩展到多个文件

如何将0.1和0.22之间的数字扩展到更大的距离0和1？

当我使用jQuery修改窗口的大小时，如何在“主体”上看到窗口的宽度和高度？

“如何使用‘将 li 内的跨度图像放入标签’然后固定高度和跨度宽度类”

将元素扩展到div的宽度

将元素扩展到div的宽度

将jQuery垂直制表符内容区域扩展到整个页面宽度