Bootstrap 3.0: Jak umieścić tekst i dane wejściowe w tej samej linii?

Obecnie przechodzę na Bootstrap 3.0. Mam problem z wprowadzaniem formularzy i formatowaniem tekstu. To, co działało w Bootstrap 2, nie działa w Bootstrap 3.

Jak uzyskać tekst w tym samym wierszu przed i po wprowadzeniu formularza? Zawęziłem to do problemu z klasą „form-control” w przykładzie w wersji Bootstrap 3.

Jak zabrać cały tekst i dane wejściowe w jednej linii? Chciałbym, aby przykład bootstrap 3 wyglądał jak przykład bootstrap 2 w pliku jsfiddle.

Przykład skrzypiec JS

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

Aktualizacja: zmieniam kod na taki, który działa, ale mam teraz problemy z wyrównaniem. Jakieś pomysły?

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

Umieściłbym każdy element, który chcesz, w wierszu, w oddzielnym col-md- * div w twoim wierszu. Lub wymuś wyświetlanie elementów w tekście. Klasa form-control wyświetla blok, ponieważ jest to sposób, w jaki program bootstrap uważa, że ​​należy to zrobić.

Prosto z dokumentacji http://getbootstrap.com/css/#forms-horizontal .

Użyj predefiniowanych klas siatki Bootstrap, aby wyrównać etykiety i grupy kontrolek formularza w układzie poziomym, dodając .form-horizontaldo formularza (co nie musi być a <form>). Spowoduje to zmianę, .form-groupsaby zachowywać się jak wiersze siatki, więc nie ma potrzeby .row.

Próba:

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

Potrzebujesz .form-inlineklasy. Musisz jednak uważać, w nowej .form.inlineklasie musisz określić szerokość każdej kontrolki.

Spójrz na to

Żadne z nich nie działało dla mnie, musiałem używać .form-control-staticklasy.

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

Możesz to zrobić w ten sposób:

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

Skrzypce

po prostu podaj matkę div "class =" col-lg-12 ""

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

To będzie

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

Sposób, w jaki to rozwiązałem, polegał po prostu na dodaniu nadpisania dla wszystkich moich pól tekstowych w głównym css mojej witryny, tak jak to:

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

wszystkie, sprawdź zaktualizowany kod, którego musimy użyć

 form-control-static not only form-control

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

Dziękuję i pozdrawiam

W Bootstrap 4 for Horizontal element można używać .rowz .col-*-*klasami do określania szerokości etykiet i kontrolek. zobacz ten link .

Jeśli chcesz wyświetlić serię etykiet, kontrolek formularzy i przycisków w jednym poziomym wierszu, możesz użyć .form-inlinetego łącza, aby uzyskać więcej informacji

Lub możesz to zrobić:

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

Wypróbowałem każdą z powyższych sugestii i żadna z nich nie działała. Nie chcę wybierać stałej liczby kolumn w siatce 12 kolumn. Chcę, aby monit i dane wejściowe zaraz po nim, a kolumny były rozciągane w razie potrzeby.

Tak, wiem, o to właśnie chodzi w bootstrapie. I NIGDY nie powinieneś używać stołu. Ponieważ DIV jest o wiele lepszy niż tabele. Problem w tym, że tabele, wiersze i komórki faktycznie DZIAŁAJĄ.

TAK - NAPRAWDĘ WIEM, że są fanatycy CSS, a odruchowa reakcja nigdy nie polega na używaniu TABLE, TR i TD. Tak, wiem, że DIV class = "table" z DIV class = "row" i DIV class = "cell" jest dużo lepsze. Z wyjątkiem sytuacji, gdy to nie działa i jest wiele przypadków. Nie uważam, że ludzie powinni ślepo ignorować takie sytuacje. Czasami TABLE / TR / TD będzie działać dobrze i nie ma powodu, aby stosować bardziej skomplikowane i delikatniejsze podejście tylko dlatego, że jest uważane za bardziej eleganckie. Deweloper powinien zrozumieć, jakie są zalety różnych podejść i kompromisy, i nie ma absolutnej zasady, że DIV są lepsze.

"Przykład - na podstawie tej dyskusji przekonwertowałem kilka istniejących tds i trs na div. 45 minut majstrowania przy tym, próbując ustawić wszystko obok siebie i poddałem się. TD z powrotem za 10 sekund później - działa - od razu - we wszystkich przeglądarkach, nic więcej do zrobienia. Proszę, postaraj się, abym zrozumiał - jakie masz uzasadnienie, że chcę, żebym zrobił to w inny sposób! ” Zobacz [ https://stackoverflow.com/a/4278073/1758051]

I to: "

Układ powinien być łatwy. Fakt, że są artykuły napisane o tym, jak osiągnąć dynamiczny układ trzech kolumn z nagłówkiem i stopką w CSS, pokazuje, że jest to kiepski system układu. Oczywiście możesz go uruchomić, ale w Internecie są dosłownie setki artykułów o tym, jak to zrobić. Prawie nie ma takich artykułów dla podobnego układu z tabelami, ponieważ jest to oczywiste. Bez względu na to, co powiesz przeciwko tabelom i na korzyść CSS, ten jeden fakt odwraca wszystko: podstawowy układ trzech kolumn w CSS jest często nazywany „Świętym Graalem”. [ Https://stackoverflow.com/a/4964107/ 1758051]

Nie widziałem jeszcze sposobu, aby zmusić DIV, aby zawsze ustawiali się w kolumnie we wszystkich sytuacjach. Ciągle pokazywane są trywialne przykłady, które tak naprawdę nie napotykają problemów. „Responsywność” polega na zapewnieniu sposobu, w jaki nie zawsze będą ustawiać się w jednej kolumnie. Jeśli jednak naprawdę chcesz mieć kolumnę, możesz marnować godziny, próbując zmusić DIV do pracy. Czasami musisz użyć odpowiedniej technologii bez względu na to, co mówią zeloci.