如何使用 Bootstrap 4 在 box-inner div 中设置全高？

在 Bootstrap 4 中，要设置一个 div 的全高并不是很复杂。可以通过几种方法来实现。

1. 使用 flex 布局

一个很方便的方法是使用 flex 布局。我们可以将包裹 box-inner 的父 div 设置为 display: flex，并设置其子项的 flex 属性为 1。这样就可以将 box-inner 的高度设置为和其父 div 相同了。

<div class="wrapper d-flex">
  <div class="box-inner"></div>
</div>

.wrapper {
  height: 100%;
  display: flex;
}

.box-inner {
  flex: 1;
}

2. 使用 vh 单位

我们也可以使用视窗高度单位 vh 来设置 div 的高度。这样可以确保 box-inner 的高度一直是浏览器窗口高度的百分比。

<div class="wrapper">
  <div class="box-inner"></div>
</div>

.wrapper {
  height: 100vh;
}

.box-inner {
  height: 100%;
}

3. 使用绝对定位

最后，我们可以使用绝对定位来设置 div 的高度。这种方法比较适合在父 div 中有其他内容的情况下使用。

<div class="wrapper">
  <div class="box-inner"></div>
  <div class="other-content"></div>
</div>

.wrapper {
  position: relative;
  height: 500px;
}

.box-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.other-content {
  margin-top: 10px;
}

以上是三种常用方法，可以根据自己的需求选择合适的方法来实现。