Bootstrap响应行高

Question

我似乎无法在任何地方找到它，但似乎很简单。

我有一个使用.container-fluid的全宽网站。该网站被划分为全宽行。我希望行的高度响应。 （如果行填充桌面上大约一半的视口，它会缩小以填充平板电脑上大约一半的视口）

我非常感谢示例代码的解释与“这里使用此...”

谢谢！

Answer 1

您应该考虑使用viewport units：vh

因此，如果您想要一行是视口高度的一半，那么在任何设备上，请使用50vh

jsFiddle Demo

Answer 2

这是为了解决方案。但有一种方法是视口单元。这是制作响应div高度的最佳方式。

.row {
  background: #c62222;
  height: 50vh;
  margin-bottom: 10px;
  color: #fff;
  font-size: 18px;
  line-height: 50vh;
  text-align: center;
}

<div class="row">HALF RESPONSIVE DIV</div>
<div class="row">HALF RESPONSIVE DIV</div>

打开此网址： https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/