Question

我有一个围绕着引导形式的div 当我为该div定义背景颜色时，在表单中看不到背景颜色。

ADD ：我在wrapper_form - div之前添加了三个主要div，以便您全面了解情况。在第一个主要div之前，会启动body标签。

这是我的代码：

.wrapper {
    min-height: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    display: inline-block;
}
.main-wrapper {
    height: 100%;
    overflow-y: auto;
    padding: 50px 0 0px 0;
}
.content {
    position: fixed;
    top: 50px;
    bottom: 36px;
    left: 0;
    right: 0;
    padding: 0 15px;
    overflow:auto;
}

.wrapper_form {
    background-color: yellow;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>

<div class="wrapper">
	<div class="main-wrapper">
        <div class="content">

<div class="wrapper_form">
    <div class="form-group form-inline">
    <div class="col-md-4">
        <label class="control-label">Input:</label>
    </div>
    <div class="col-md-8">
         <input type="text" class="form-control" name="myInput" id="myInput" value="" />                  
    </div>
    </div>
</div>

</div><!-- /.content-->
</div><!-- /.main-wrapper -->
</div><!-- /.wrapper -->

Answer 1

您的内部元素已浮动 - 尝试切换列上的float属性，您将看到样式。

如果你浮动包装元素，它将采用黄色背景。

Answer 2

.wrapper_form {background-color: yellow !important;}

Answer 3

.form-group:after,.form-group:before{
 clear:both;
 content:'';
 display:table;
}

Answer 4

.wrapper_form {
  background-color: yellow !important;
 }

试试这个

Div背景颜色不以bootstrap形式继承

4 个答案: