html - Bootstrap : can't see background if I use the defined grid system

Question

我有一个使用 Bootstrap 3 的双列设计。左列有一个表单，右列有一个解释性文本。在两列的后面，我都有一个带图像的背景。这是我的 HTML:

<div id="contenido_principal">

<div id="formulario"  class="col-md-6">
<form id="pedido" action="" method="post" data-toggle="validator" role="form">
          <h4>Data to be input:</h4>
        <input name="datos" type="number" min="1" class="form-control input-sm" id="inputBags" placeholder="Introduzca un número" required>
    <section id="botonsubmit">
           <button type="submit" class="btn btn-primary">Submit</button>
    </section>

</form>
</div>

<section id="explicacion" class="col-md-6">
Take advantage of our awesome offers!!!

 Bla bla bla bla bla
</section>

如您所见，左列是“formulario”DIV，右列是“explicacion”SECTION。这是我的 CSS:

main{
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    min-height: 650px;
}

main header h3{
    color:#2176C9;
}

section{
    margin-bottom: 20px;
}

section p{
    margin-top: 20px;
}


#contenido_principal {
    background-color: green;
/*    background-image: url('../img/layout/fondo_form.jpg');
 Instead of an image, I'm putting the BG as green to demostrate the effect */
    background-repeat: no-repeat;
}

#formulario {
    width: 50%;
    border: 1px;
}

#pedido{
    margin-left: 30px;
    margin-right: auto;
    display: table;   
}

#pedido section{
    display: inline-block;
    padding: 5px 40px 5px 40px;
    vertical-align: top;
    width: 80%;
}

#pedido section h4 {
    margin: 5px 0px 5px 0px;   
}

#pedido section h5 {
    margin: 10px 0px 5px 0px;   
}

#pedido #next{
    width: 100%;
    margin-bottom: 100px;
}

(我已经编辑了 CSS，这样它就不会加载图像，而是将背景显示为绿色)。

现在，上面的代码按原样显示了白色的两列，您看不到任何绿色背景。但是，如果我删除 class="col-md-6" 部分，背景就会变得可见。

这是为什么？

Answer 1

为了使用 Bootstrap，您需要将您的列包装在类为“row”的 div 中(参见 Bootstrap 文档 here)

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

所以在你的情况下你需要这样的东西:

<div id="contenido_principal">
    <div class="row"> <!-- Missing!! -->
        <div id="formulario" class="col-md-6">
            <form id="pedido" action="" method="post" data-toggle="validator" role="form">
                 <h4>Data to be input:</h4>

                <input name="datos" type="number" min="1" class="form-control input-sm" id="inputBags" placeholder="Introduzca un número" required>
                <section id="botonsubmit">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </section>
            </form>
        </div>
        <section id="explicacion" class="col-md-6">Take advantage of our awesome offers!!! Bla bla bla bla bla</section>
    </div>
</div>