Question

我需要帮助

我无法使用css

更改bootstrap父元素的背景颜色

这是我的HTML代码

    <div class="body-panel">
            <div class="col-sm-4 left-guest">
                testing
            </div>
            <div class="col-sm-8 right-guest">

            </div>

    </div>

这是我的css

.body-panel{
  color: blue;
  background-color: red;
}
.left-guest{
  border: dotted 1px black;
  min-height: 1000px;
}
.right-guest{
  border: dotted 1px black;
  min-height: 1000px;
}

但是类body-panel的背景颜色不起作用，颜色正常工作

有人可以帮助我吗？

感谢

Answer 1

由于浮动子项（.body-panel）

，

col-sm-8的高度为零

您需要通过给.body-panel row类或clearfix类来清除浮点数，这两个类都是在引导辅助类中构建的。

<div class="body-panel row">
  <div class="col-sm-4 left-guest">
    testing
  </div>
  <div class="col-sm-8 right-guest">

  </div>

</div>

<div class="body-panel clearfix">
  <div class="col-sm-4 left-guest">
    testing
  </div>
  <div class="col-sm-8 right-guest">

  </div>

</div>

EXAMPLE

Answer 2

让body-panel溢出：隐藏甚至更好，一个行类。

这是因为bootstrap中的col类是浮动的，因此父元素不考虑它们的高度，所以即使它应用背景颜色，你的身体面板也没有高度amd，你看不到它。 / p>

我强烈建议给它一个行类，因为这是使用引导网格类的正确方法。

Answer 3

您可以使用jquery来实现此方案

请尝试此操作以更改父div的背景颜色。

**

<script type ="text/javascript">
    $(document).ready(function () {
        $(".left-guest").parent().css("background-color", "yellow");
    });
</script>

**

如何更改col-sm（bootstrap）父元素background-color

3 个答案: