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

你让它有点过于复杂，请看我的codepen。使用Bootstrap时，请考虑从大到小。它可以帮助您开发布局，然后逐步适应较小的事物。

希望这有帮助！：）

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp">
    <TextView
        android:id="@+id/info_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v7.widget.CardView>

Bootstrap网格配置

2 个答案: