本文探讨了一位开发者在使用Bootstrap创建一个包含三列布局的页面时遇到的问题，特别是在设置中间列的高度和响应式显示时。作者尝试了不同的CSS解决方案，包括使用`height:auto`和`height:fixed`，但未能达到理想效果。同时，页面背景图像的适配也是一个挑战。代码片段展示了尝试的样式，其中左侧和右侧列带有背景图像，而中间列用于导航栏，颜色为黑色，文字为白色。
我有点沉迷于这个简单的页面(我知道你可能会用它翻白眼,请忍受我)。我已经使用引导程序很多年了,直到我的经理想在手机上看到它时,有什么东西击中了我。我尝试过很多不同的方法,但是没有一个方法能与下一个截图的布局相匹配。
Navbar
在中间。宽度对我来说没问题,但是我在设置高度时有问题。
另外,在桌面上,我尝试使用三列布局,它看起来很好,直到我添加了一个中间的导航栏(它在背景中看起来很膨胀,很恐怖),并且所有的列都没有使用正确的高度,所以我怀疑CSS有点错误。我试过了
height:auto
或
height:fixed
但是没有一个是完美的,正如你在我写的代码片段中看到的那样。
我用这个来做上校,但我相信我会告诉你我应该使用flex。
我正在使用这个背景图像,我环顾四周寻找模板或示例,但他们中的大多数使用一个图像作为全宽背景。有柱子的高度不多
.MainBackgroundImages {
padding-bottom: 40%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
这是我写的一个片段,你可以看到高度有点问题。
.leftHalf {
background-image: url('https://via.placeholder.com/2000/FF0000/FFFFFF/?text=Left');
}
.centerHalf {
background-color: black;
color: white;
text-align: center
}
.rightHalf {
background-image: url('https://via.placeholder.com/2000/FFFF00/00000/?text=right');
}
.MainBackgroundImages {
padding-bottom: 40%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
扫一扫
1669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
