Soru Twitter bootstrap 3 form-yatay ve tek satırda çoklu giriş sütunları


Tek satırda birden fazla giriş sütununu şu şekilde yerleştirmem gerekiyor:

What i need

Bunu, birden çok girişi tek olarak gruplayarak yaptım form-groupama bu şekilde kullanamam has-error sınıf.

<div class="form-group">
     <label class="control-label col-sm-4">Quarter</label>
     <input type="text" class="col-sm-20" />
</div>
<div class="form-group">
     <label class="control-label col-sm-4">Address</label>
     <input type="text" class="col-sm-15" />
     <label class="control-label col-sm-2">Addr. №</label>
     <input type="text" class="col-sm-3" />
</div>
<div class="form-group">
     <label class="control-label col-sm-4">Block name/Number</label>
     <input type="text" class="col-sm-5" />
     <label class="control-label col-sm-2">Entrance</label>
     <input type="text" class="col-sm-3" />
     <label class="control-label col-sm-2">Floor</label>
     <input type="text" class="col-sm-3" />
     <label class="control-label col-sm-2">Apartament</label>
     <input type="text" class="col-sm-3" />
</div>

Yani çoklu olması mümkün mü form-groupHer giriş kutusu için mi?


21
2018-05-10 13:23


Menşei


Bootstrap içinde col-sm-20 gibi bir şey yoktur, col-sm-1 ile col-sm-12 arasındaki değerleri sağlayabilmesi için ekranı bölmek üzere 12 ızgaralı bir sistem kullanır. - Mustafa sabir


Cevaplar:


Önyükleme 3'teki nesneleri kolayca hizalamak için kullanmalısınız. Izgara sistemi.
Burada bir keman ihtiyaçlarınıza yakın:

<body>
<form class="form-horizontal">
    <div class="row">
       <div class="form-group">
        <label class="col-sm-2">Quarter</label>
        <div class="col-sm-10"><input type="text" class="form-control" /></div>
        </div>
   </div>
    <div class="row">
        <div class="form-group">
        <label class="col-sm-2">Address</label>
        <div class="col-sm-5"><input type="text" class="form-control" /></div>
        </div>
        <div class="form-group">
        <label class="col-sm-2">Addr. №</label>
        <div class="col-sm-3"><input type="text" class="form-control" /></div>
        </div>
    </div>
    <div class="row">
         <div class="form-group">
        <label class="col-sm-2">Block name/Number</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
        </div>
        <div class="form-group">
        <label class="col-sm-1">Entrance</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
         </div>
         <div class="form-group">
        <label class="col-sm-1">Floor</label>
        <div class="col-sm-1"><input type="text" class="form-control" /></div>
         </div>
         <div class="form-group">
        <label class="col-sm-2">Apartament</label>
        <div class="col-sm-3"><input type="text" class="form-control" /></div>
        </div>
    </div>
</form>
</body>

Hizalama ekranın genişliğine bağlı olduğundan, ihtiyaçlarınızı doğru bir şekilde ayarladığınızdan emin olun. Sonra girişleri kendiniz şekillendirebilirsiniz.


12
2018-05-10 14:02



Nerede göremiyorum <form class="form-horizontal"></form> ve <div class="form-group"></div> olduğunu. Korumak istiyorum form-groupvalidasyona kolayca bağlanacak öğeler. - suricactus
Keman ile oynayabileceğini biliyorsun, değil mi? Senin için değiştirdim. Daha iyi mi ? - Sephy
keman dahil değil form-group elementler. - Kundan Singh Chouhan
sadece .form-grubu ile .row'u değiştirin, belgeler açıkça belirtiyor: form-yatay için, ikisi de aynı şekilde çalışıyorlar - Juan


Girdileri kendi başlarına sarmanız gerekiyor col-* Bunun gibi sınıflar ..

  <form class="form-horizontal">
      <div class="form-group">
          <label class="control-label col-sm-2">Quarter</label>
          <div class="col-md-10">
           <input type="text" class="form-control">
          </div>
      </div>
      <div class="form-group">
          <label class="control-label col-sm-2">Address</label>
          <div class="col-md-8">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Addr. №</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
      </div>
      <div class="form-group">
          <label class="control-label col-sm-2">Block name/Number</label>
          <div class="col-md-4">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Entrance</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Floor</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
          <label class="control-label col-sm-1">Apartment</label>
          <div class="col-md-1">
           <input type="text" class="form-control">
          </div>
      </div>
  </form>

gösteri

Ayrıca, yok col-sm-15 veya col-sm-20 Bootstrap içinde


17
2018-05-15 11:50



SASS / LESS kullanıyorsanız ya da bootstrap'in indirme sayfasında ayarlarla oynarsanız, istediğiniz sayıda sütun olabilir. - suricactus
Tabii ki. OP'nin standart Bootstrap derlemesini kullandığını farz ettim. - Themes.guide
Bu örnekte, bir satırda yalnızca bir alanı hata olarak işaretlemek mümkün değildir. Yoksa bir şey özlüyorum. - Rafal Gałka