Soru Giriş-grup-eklentileri ile girişleri bootstrap formunda nasıl hizalarsınız?


Kullanılmadığım zaman kolayca (otomatik) hizalayabileceğim Bootstrap 3 ile çok basit bir formum var. input-group-addons.

Onları formumda kullanmamdan sonra onu hizalamak imkansızdır (eklentileri olan çizgi eklenen eklentiler nedeniyle daha geniştir)

<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/


25
2018-01-24 18:47


Menşei




Cevaplar:


Giriş grupları için bootstrap belgeleri şöyle diyor:

Giriş grubunu diğer bileşenlerle karıştırmayın. (görmek:http://getbootstrap.com/components/#input-groups)

Form grupları veya kılavuz sütun sınıflarını doğrudan giriş gruplarıyla karıştırmayın. Bunun yerine, giriş grubunu form grubunun veya kılavuzla ilgili öğenin içine yerleştirin. "

Yani "col-sm-4" ile aynı sınıftaki "giriş-grubu" ile karışamazsınız. 2 div sınıfı, ilk "col-sm-4" ve diğeri "input-group" ile oluşturmalısınız.

<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>

Güncelleştirilmiş Fiddle


32
2018-04-21 21:40





Çünkü .input-group varsayılan

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

yani senin div tam genişliğe uzanacak, nerede .col-sm-4 varsayılan stilleri şu şekildedir:

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

Bu nedenle, beklendiği gibi çalışmasını sağlamak için şu stili ekleyebilirsiniz:

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

Güncelleştirilmiş Fiddle


17
2018-01-24 18:53





Şunu içermem gerek: şamandıra: sola da. Yani, css:

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

Değilse, v3.0.2'den v3.0.3'e yükselttiğimde çok sütunlu satırlarım bozuldu.

--cp


3
2018-01-30 03:11





.input-group [class * = "col-"] kullandıysanız kullanışlı değil

<fieldset>

İşte çözüm!

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

0
2018-02-11 16:59