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>

如您所见，左栏是＆＃34; formulario＆＃34; DIV，右栏是＆＃34; explicacion＆＃34;部分。这是我的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>

Bootstrap：如果我使用定义的网格系统，则无法看到背景

1 个答案: