Używanie grupy wejściowej wewnątrz formularza liniowego

Question

Po dodaniu input-group do form-inline, input-group pojawia się pod formularzem w "nowej linii" zamiast w linii z innymi elementami sterującymi.

Wydaje się, że to dlatego, że klasa input-group owijka ma display zestaw do table natomiast pozostałe wejścia, które pracują w porządku, mają swoje display zestaw do inline-block. Oczywiście wyświetlanie obrazu input-groupinline-block nie jest możliwe, ponieważ jego przedział podrzędny add-on, który ma , potrzebuje właściwości elementu macierzystego, aby poprawnie wyrównać.

Więc moje pytanie brzmi: jest możliwe aby użyć input-group wewnątrz formularza inline używając wyłącznie klasy bootstrap? Jeśli nie, jaka byłaby najlepsza praca około pozwalająca na użycie niestandardowych klas.

Oto demo ilustrujący mój punkt widzenia. Kod jest następujący:

<form action="" class="form-inline"> 
    <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> 
    <input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/> 

    <div class="checkbox"> 
     <label> 
      <input type="checkbox" /> and Checkboxes 
     </label> 
    </div> 
    <select class="form-control" style="width: 150px;"> 
     <option>and Selects</option> 
    </select> 

    <button type="submit" class="btn btn-default">and Buttons</button> 
    <div class="input-group" style="width: 220px;"> 
     <span class="input-group-addon">BUT</span> 
     <input type="text" class="form-control" placeholder="not with input-groups" /> 
    </div> 
</form> 

Answer 1

To był rzeczywiście błąd i został rozwiązany (sprawdź numer issue on github, aby uzyskać więcej informacji).

Od tej pory formularze wstawiane w BootStrap wymagają zawijania formantów formularza potomnego za pomocą .form-group.

Więc mój kod stałby się:

<form action="" class="form-inline"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/> 
    </div> 

    ... 
    <div class="form-group"> 
     <div class="input-group" style="width: 220px;"> 
      <span class="input-group-addon">BUT</span> 
      <input type="text" class="form-control" placeholder="not with input-groups" /> 
     </div> 
    </div> 
</form> 

Answer 2

Myślę, że może zajść potrzeba oddzielenia formularza w kolumny, aby uzyskać żądany układ liniowy. Przykład (myślę o tym, czego szukasz) znajduje się na stronie Bootstrap here.

spróbuj umieścić

<div class="col-lg-1"></div> 

wokół kontroli, aby zobaczyć, co mam na myśli. Oczywiście musisz pracować w kolumnach po 12, więc trzeba będzie to odpowiednio dostosować.