引导网格配置

Question

我在 bootstrap 3 中找不到此配置的正确配置 ...

我有这个输入字段，但我不能把图像放在那个位置

 <div class="row">
    <div class="col-sm-4 col-md-4">
        <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
            <input size="16" class="form-control" type="text" name="nombre" required placeholder="Tu nombre completo">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-4 col-md-4">
        <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
            <input size="16" class="form-control" type="email" name="correo" required placeholder="Tu email">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-4 col-md-4">
        <div class="input-group-btn">
            <button type="button" class="btn btn-success" id="agregar"><span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
            </div>
        </div>
    </div>

Answer 1

试试这个：

<div class="row">
     <div class="col-sm-6">
       <div class="row">
         <div class="input-group-btn">
           <button type="button" class="btn btn-success" id="agregar">
           <span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
         </div>
       </div>
       <div class="row">
         <div class="input-group-btn">
           <button type="button" class="btn btn-success" id="agregar">
           <span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
         </div>
       </div>
     </div>
     <div class="col-sm-6">
       Image here
      </div>
    </div>
  </div>
</div>

您应该再看看网格文档。嵌套是一个可靠的选择，此外，您不需要将 col-sm-6 与 col-md-6 结合使用，如果值相同，则仅使用较小的。

Answer 2

你让它有点太复杂了，看看我的代码笔。使用 Bootstrap 时，从大到小。它可以帮助您开发布局，然后逐步处理更小的内容。

希望这会有所帮助！ :)

http://codepen.io/sequential/pen/egxbbK

<div class="row">
  <div class="col-sm-6 tier1">
    <div class="smBox"></div>
    <div class="smBox"></div>
  </div>
  <div class="col-sm-6 tier1">
     <div class="lgBox"></div>
  </div>
</div>