Twitter Bootstrap - Pionowo wyrównać wejście z etykietą wewnątrz kontrolnej grupie

<div class="control-group"> 
    <label class="control-label ">Date of purchase as detailed on your receipt</label> 
    <div class="controls"> 
     <div class="input-append"> 
      <select name="invoice_date" value="2013-06-28" required="required"> 
       <option value="">Please Select</option> 
      </select> 
      <button type="button" class="btn info btn-primary" data-help="invoice_date">i</button> 
     </div> 
    </div> 
</div>

Próbowałem kilka rozwiązań i jeden rodzaj pracował przy użyciu pozycji absolutnej, ale miało to wpływ na inne obszary bootstrap w szczególności, gdy robi się czuły.Twitter Bootstrap - Pionowo wyrównać wejście z etykietą wewnątrz kontrolnej grupie

http://jsfiddle.net/tGZLd/

Próbuję uzyskać wejście do jednej linii z centrum etykiecie, które zostały wypchnięte przez wiele linii, ale w najlepszej praktyki startowej.

Czy powinienem po prostu zrezygnować i zmusić go do wyświetlenia etykiety o pełnej szerokości z wejściem pod spodem?

Każdy wgląd byłby świetny, dzięki!

Źródło

2013-07-24 Hard-Boiled Wonderland

I dodaną 'margin-top: 10px 'do' div.input-append' i wydaje się, że wygląda ładnie, ale nie jest pewne, czy właśnie to robisz. Baw się z marginesami i paddingem zamiast pozycjonowaniem, aby inne wejścia, które dodasz, będą również podlegały tym zmianom. Daj mi znać, jak to pójdzie – aug

Właśnie dodałem css dla znaczników 'select' i' button' do 'style =" vertical-align: text-top "'. Czy tego właśnie szukasz? Działające skrzypce: http://jsfiddle.net/EwD6Z/ – jlars62

@aug To rozwiązanie z przerwą w działaniu i może działać, jeśli ustawię wiele stylów, ale szukałem czegoś bardziej dynamicznego. –

Jak o przesłanianie style Bootstrap i korzystania display:inline-block; zamiast pływaków do pozycjonowania, a następnie można użyć vertical-align centrum etykiecie:

.form-horizontal .control-label { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 
.form-horizontal .controls { 
    display: inline-block; 
    margin-left: 20px; 
}

Example fiddle

Źródło

2013-07-24 22:42:52

Właśnie to przetestowałem i chociaż zrobiłem tylko lekkie testowanie, to było responsywne i to faktycznie rozwiązało inny problem, którego doświadczałem z responsywnymi aspektami formularzy z Bootstrap. To jest takie proste, nie mogę uwierzyć, że to przegapiłem, dzięki. –

-1

Dodaj klasę do pliku wejściowego, a następnie zastosuj do tego margines.

<div class="input-append spacedTop">

Następnie dodać CSS

.spacedTop { margin-top:10px; }

Jeśli nie zrobić dodatkową klasę to będzie margines wszelkie inne wejścia dołącza użyć całej swojej stronie.

Źródło

2013-07-24 22:42:09

Jak wspomniano powyżej, byłoby to rozwiązanie, ale gdy etykiety zaczynają obejmować więcej linii, to nie jest to rozwiązanie wystarczająco dynamiczne, ale dzięki za pomysł. –

Twitter Bootstrap - Pionowo wyrównać wejście z etykietą wewnątrz kontrolnej grupie

Odpowiedz

Powiązane problemy