Html Bootstrap 3全宽全高布局，带3列Flex或Col

我有点被这个简单的页面卡住了（我知道你可能会看它，请耐心等待）。我已经使用Bootstrap很多年了，直到我的经理想在手机上看到它时，我才意识到这一点。我尝试了很多不同的方法，但是没有一个与下一个截图的布局相匹配，在中间使用了<代码> NavBar < /Cord>。宽度对我来说很好，但是我设置高度有问题

此外，在桌面上，我尝试使用三列布局，它看起来不错，直到我添加了一个中间导航栏（背景看起来臃肿可怕），所有列都没有使用正确的高度，所以我怀疑CSS有点错误。我尝试过

height:auto

或

height:fixed

，但没有一个像我写的代码片段中看到的那样完美

这是我写的一个片段，你可以看到高度有点问题

.leftHalf{
背景图像：url（'https://via.placeholder.com/2000/FF0000/FFFFFF/?text=Left');
}
.中卫{
背景色：黑色；
颜色：白色；
文本对齐：居中
}
.右半{
背景图像：url（'https://via.placeholder.com/2000/FFFF00/00000/?text=right');
}
.main背景图片{
垫底：40%；
背景位置：50%50%；
背景重复：无重复；
背景尺寸：封面；
}

切换导航

对于全高布局，您需要告诉

列的父元素

以获得视口的所有可用高度，这可以通过定义下一个类来完成：

full-height {
  height: 100vh;
}

并将此类分配给包装

列的
行
。在此之后，需要将三列的
height
属性设置为
100%
（因此它们将使用父元素的100%高度）

现在，在小型设备（SM）上，您希望更改以前的布局：所有列将使用12个可用的引导网格。因此，您必须像下一个一样使用媒体查询来管理列的高度（这里记录了引导3个断点：）：

在下一个工作示例中使用了前面的所有解释，请检查全屏模式播放和调整浏览器大小。对你来说，这是一个家庭作业，要正确显示中间
navbar
的布局。希望这能帮助你作为你需要的布局的基础


。全高{
高度：100vh；
}
.左半{
背景图像：url（'https://via.placeholder.com/2000/FF0000/FFFFFF/?text=Left');
身高：100%；
}
.中卫{
背景色：黑色；
颜色：白色；
文本对齐：居中；
身高：100%；
}
.右半{
背景图像：url（'https://via.placeholder.com/2000/FFFF00/00000/?text=right');
身高：100%；
}
.main背景图片{
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
/*小型设备、平板电脑的定制风格*/
@仅介质屏幕和（最大宽度：992px）{
.左半{
身高：40%；
}
.中卫{
身高：20%；
}
.右半{
身高：40%；
}
}

切换导航






因此，作为一个起点：在SM屏幕大小和更大的屏幕上，您需要3列配置
（5、2、5）
所有这些都使用屏幕的可用高度？是的，我使用过SM，但它仍然是相同的问题，因为两者（桌面和移动）我们在屏幕的高度上进行了调整，因为我一直在底部留有一个间隙，因为我知道它不是100%的高度。谢谢，这是有意义的！将全宽和全高放在一起会更清晰。非常感谢。
    .MainBackgroundImages {
        padding-bottom: 40%; 
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

full-height {
  height: 100vh;
}

@media only screen and (max-width : 992px) {

    .leftHalf {
        height: 40%;
    }

    .centerHalf {
        height: 20%;
    }

    .rightHalf {
        height: 40%;
    }
}