web-dev-qa-db-ja.com

入力グループアドオンでbootstrapフォームの入力を揃える方法は？

Bootstrap 3の非常にシンプルなフォームがあり、input-group-addonsを使用しないときに簡単に（自動的に）調整できます。

フォームでそれらを使用した後、配置することはできません（アドオンが追加されているため、アドオンのある行は広くなっています）

<form class="form-horizontal" role="form">

    <div class="form-group">
      <label for="product_name" class="col-sm-2 control-label">Product name</label>
      <div class="col-sm-4">
        <input type="text" class="form-control" id="product_name" placeholder="Product name">
      </div>
    </div>

    <div class="form-group">
      <label for="product_price" class="col-sm-2 control-label">Price</label>
      <div class="col-sm-4 input-group">
        <span class="input-group-addon">$</span>
        <input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
        <span class="input-group-addon">.00</span>
      </div>
    </div>

    <div class="form-group">
      <label for="product_description" class="col-sm-2 control-label">Description</label>
      <div class="col-sm-6">
        <textarea class="form-control" id="product_description" placeholder="Description" rows="5"></textarea>
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
</form>

JsFiddle： http://jsfiddle.net/Yzxy3/

htmlcsstwitter-bootstrapalignment
26
Patryk

入力グループのブートストラップドキュメントには次のように書かれています：

入力グループを他のコンポーネントと混合しないでください（参照： http://getbootstrap.com/components/#input-groups ）

フォームグループまたはグリッド列クラスを入力グループと直接混在させないでください。代わりに、フォームグループまたはグリッド関連要素内に入力グループをネストします。」

したがって、同じクラスで「col-sm-4」と「input-group」を混在させることはできません。 2つのdivクラスを作成する必要があります。1つは「col-sm-4」で、もう1つは「input-group」で

<div class="col-sm-4">
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
    <span class="input-group-addon">.00</span>
  </div>
</div>

更新されたフィドル

33
danivek

その理由は .input-groupにはデフォルトがあります

padding-right: 0;
padding-left: 0;

divは幅全体に伸びますが、.col-sm-4のデフォルトスタイルは次のとおりです。

padding-right: 15px;
padding-left: 15px;

したがって、期待どおりに機能させるために、このスタイルを追加できます。

.input-group[class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

更新されたフィドル

17
Felix

含める必要があることがわかりました：float：leftも同様です。したがって、CSSは次のとおりです。

.input-group[class*="col-"] {
    float: left;
    padding-right: 15px;
    padding-left: 15px;
}

そうでない場合、v3.0.2からv3.0.3にアップグレードしたときに、複数列の行が壊れました。

--cp

3
cplee70

.input-group [class * = "col-"]は、次を使用する場合は役に立ちません。

<fieldset>

これが解決策です！

.makeHorizontal{  
float:left;
padding-left:20px;
}
0
ErcanE