Question

我在客户容器container-home中设置了3列。容器主页包含一个半透明的白色背景，我希望它会在后续图标后面流动。

但是，背景显示为条形图，不会在图标后面显示。

我在这里做错了什么？

codepen.io/anon/pen/qrvvwg

Answer 1

编辑：如果您不想为容器设置高度，您也可以按照此方法设置引导列而不是容器的背景。我认为这更可靠，因为你不必担心你是否正确设置了身高http://codepen.io/anon/pen/qrvGNa

问题是container-home的内容是bootsrap列。所以很自然地，它们浮动到左边并从正常文档流中取出。因此他们的容器没有高度。你必须设置一个高度，以使conatiner具有这样的背景颜色。看看我的变化 - ＆gt; http://codepen.io/anon/pen/XMGQmx

.container-home {
 height:165px;
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
 background-color: rgba(255, 255, 255, 0.8) !important;
 }

如果你想要高度响应你可以用vh设置它

    .container-home {
 height:10vh; /*or whatever height you want*/
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
 background-color: rgba(255, 255, 255, 0.8) !important;
 }

Bootstrap - 背景颜色

1 个答案: