Div background-цвет, не унаследованный в форме начальной загрузки

#css #twitter-bootstrap

Вопрос:

У меня есть div, который окружает форму начальной загрузки.
Когда я определяю цвет фона для этого div, цвет фона не отображается в форме.

ДОБАВИТЬ: я добавил три основных раздела перед wrapper_form — 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 -->

Ответ №1:

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

1. Вы должны добавить описание к своему ответу вместо того, чтобы просто публиковать одну строку кода, чтобы OP узнал, почему вы это рекомендуете, в противном случае это приводит к тому, что люди просто копируют и вставляют код, не понимая, что он делает.

Ответ №2:

Ваши внутренние элементы перемещаются — попробуйте переключить свойство float для столбцов, и вы увидите, как меняется стиль.

Если вы переместите элемент-оболочку, он примет желтый фон.

Ответ №3:

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

1. Хотя этот фрагмент кода может решить проблему, включение объяснения действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос для читателей в будущем, и эти люди могут не знать причин вашего предложения по коду.

Ответ №4:

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

Попробуйте это