Bootstrap 3.0: Aynı satırda metin ve giriş nasıl olur?

Şu anda web sitemi Bootstrap 3.0'a geçiriyorum. Form girişi ve metin biçimlendirmeyle ilgili sorun yaşıyorum. Bootstrap 2'de işe yarayan şey Bootstrap 3'te çalışmıyor.

Bir form girişinden önce ve sonra aynı satırdaki metni nasıl alabilirim? Bunu, örneğin Bootstrap 3 sürümündeki 'form-control "sınıfıyla ilgili bir soruna daralttım.

Tüm metni ve girişi tek bir satıra nasıl alırım? Bootstrap 3 örneğinin jsfiddle'daki bootstrap 2 örneğine benzemesini istiyorum.

JS fiddle örneği

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

Güncelleme: Kodu, işe yarayan ancak şimdi hizalamayla ilgili sorun yaşayan buna değiştiriyorum. Herhangi bir fikir?

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

Satır içi istediğiniz her bir öğeyi satırınızdaki ayrı bir col-md- * div içine koyardım. Veya öğelerinizi satır içi görüntülenmeye zorlayın. Form-kontrol sınıfı bloğu görüntüler, çünkü bootstrap bunun yapılması gerektiğini düşünür.

Doğrudan http://getbootstrap.com/css/#forms-horizontal belgelerinden .

Forma ekleyerek .form-horizontal(a olması gerekmez <form>) etiketleri ve form denetimi gruplarını yatay bir düzende hizalamak için Bootstrap'in önceden tanımlanmış ızgara sınıflarını kullanın . Bunu yapmak .form-groups, ızgara satırları gibi davranacak şekilde değişir , bu nedenle.row .

Örneklem:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

.form-inlineSınıfa ihtiyacın olan şey . Yine de dikkatli olmalısınız, yeni .form.inlinesınıfla her kontrol için genişliği belirlemeniz gerekir.

Bir göz atın şuna

Bunların hiçbiri benim için işe yaramadı, .form-control-staticsınıfı kullanmak zorunda kaldı .

http://getbootstrap.com/css/#forms-controls-static

Bunu şu şekilde yapabilirsiniz:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

Vaktini boşa harcamak

sadece div "class =" col-lg-12 "" nin annesini verin

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

Olacak

<div class="form-group">
<div class="col-lg-12">
  <div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
</div>
</div>

Bunu çözme şeklim, sitemin ana css'indeki tüm metin kutularım için bir geçersiz kılma eklemekti, şöyle ki:

.form-control {
    display:initial !important;
}

hepsi kullanmamız gerektiğinden güncellenmiş kodu kontrol edin

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

Teşekkür ederim saygılarımla

Bootstrap 4 for Horizontal element'te , etiketlerinizin ve kontrollerinizin genişliğini belirtmek için sınıflarla .rowbirlikte kullanabilirsiniz .col-*-*. bu bağlantıya bakın .

Tek bir yatay satırda bir dizi etiket, form denetimi ve düğme görüntülemek istiyorsanız, .form-inlinedaha fazla bilgi için bu bağlantıyı kullanabilirsiniz.

Ya da bunu yapabilirsiniz:

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

Yukarıdaki önerilerin her birini denedim ve hiçbiri işe yaramadı. 12 sütun ızgarasında sabit sayıda sütun seçmek istemiyorum. İstemi ve hemen ardından girişi istiyorum ve sütunların gerektiği gibi genişlemesini istiyorum.

Evet, biliyorum, bu önyüklemenin ne anlama geldiğine aykırı. Ve ASLA masa kullanmamalısınız. Çünkü DIV, tablolardan çok daha iyi. Ancak sorun şu ki tablolar, satırlar ve hücreler gerçekten ÇALIŞIYOR.

EVET - GERÇEKTEN, CSS fanatikleri olduğunu biliyorum ve diz çöküşü hiçbir zaman TABLE, TR ve TD kullanmaz. Evet, DIV class = "row" ve DIV class = "cell" ile DIV class = "table" çok daha iyi olduğunu biliyorum. Çalışmadığı zamanlar hariç ve birçok durum var. İnsanların bu durumları körü körüne görmezden gelmesi gerektiğine inanmıyorum. TABLE / TR / TD'nin gayet iyi çalışacağı zamanlar vardır ve sırf daha zarif olduğu için daha karmaşık ve daha kırılgan bir yaklaşım kullanmak için bir neden yoktur. Bir geliştirici, çeşitli yaklaşımların faydalarının ve ödünleşimlerin ne olduğunu anlamalıdır ve DIV'lerin daha iyi olduğuna dair kesin bir kural yoktur.

"Örnek olay - bu tartışmaya dayanarak mevcut birkaç tds ve trs'yi div'lere çevirdim. 45 dakika boyunca her şeyi yan yana getirmeye çalışıyorum ve vazgeçtim. TD'ler 10 saniye sonra geri döndü - işe yarıyor - hemen - tüm tarayıcılarda, yapacak başka bir şey yok. Lütfen anlamamı sağlamaya çalışın - başka bir şekilde yapmamı istemek için ne gibi gerekçeleriniz var! " Görmek [ Https://stackoverflow.com/a/4278073/1758051]

Ve bu: "

Düzen kolay olmalıdır. CSS'de üstbilgi ve altbilgi ile dinamik üç sütun düzeninin nasıl elde edileceğine dair yazılmış makaleler olması, bunun kötü bir yerleşim sistemi olduğunu göstermektedir. Elbette çalıştırabilirsiniz, ancak bunun nasıl yapılacağına dair çevrimiçi olarak yüzlerce makale var. Tablolarla benzer bir düzen için bu tür makaleler hemen hemen hiç yok çünkü açıkça ortada. Tablolara karşı ve CSS lehine ne söylerseniz söyleyin, bu tek gerçek, hepsini geri alır: CSS'de üç sütunluk temel bir düzen genellikle "Kutsal Kase" olarak adlandırılır. "[ Https://stackoverflow.com/a/4964107/ 1758051]

DIV'leri her durumda her zaman bir sütunda sıraya dizmeye zorlamanın bir yolunu henüz görmedim. Sürekli olarak problemlerle karşılaşmayan önemsiz örnekler gösterilmeye devam ediyorum. "Duyarlı" onlar bir yolunu sağlamakla olur olmaz her zaman bir sütun halinde dizilir. Bununla birlikte, gerçekten bir köşe istiyorsanız, DIV'nin çalışmasını sağlamak için saatler harcayabilirsiniz. Bazen fanatikler ne derse desin uygun teknolojiyi kullanmanız gerekir.