Jak pozostawić wyrównanie elementów formularza Bootstrap?

Question

Używam Bootstrap po raz pierwszy i mam duże problemy z wyrównaniem tego formularza - poziomo w lewo.

Pozycje listy są poziome, tak jak powinny być, ale chcę, aby etykiety kontrolne (klasa Bootstrap dla etykiet formularzy) były w tej samej pozycji uniesione w lewo.

Formularz znajduje się w dziale o rozpiętości 7, ponieważ moja strona to dwie kolumny - 7 i 4 kolumny.

Poniżej znajduje się mój HTML. Jeśli spojrzysz na "Poziome formularze" na tej stronie http://accounts.tao.tw.shuttle.com/examples_bootstrap/basecss/forms, zobaczysz, że etykiety są wyrównane do lewej, ale nie są wyrównane do lewej, tak aby początek etykiet znajdował się w tej samej pozycji w pionie.

<form class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label" for="inputSaving">What are you saving for?</label> 
     <div class="controls"> 
      <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc."> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="description">Add a short description</label> 
     <div class="controls"> 
      <textarea class="span4" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="categoryselect">Choose a Category</label> 
     <div class="controls"> 
      <select class="span4"> 
       <!-- Add some CSS and JS to make a placeholder value--> 
       <option value="Kittens">Kittens</option> 
       <option value="Keyboard Cat">Keyboard Cat</option> 
       <option value="Twitter Bird">Twitter Bird</option> 
      </select> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="goal">Your Saving Goal</label> 
     <div class="controls"> 
      <input type="text" class="span4" id="goal"> 
     </div> 
    </div> 
    <button class="btn btn-large btn-primary" type="button">Submit</button> 
</form> 

Answer 1

Jeśli mówią, że problemem jest to, jak w lewo wyrównać etykiety formularza, sprawdzić, czy to pomaga:
http://jsfiddle.net/panchroma/8gYPQ/

Spróbuj zmienić text-align lewo/w prawo w CSS

.form-horizontal .control-label{ 
/* text-align:right; */ 
text-align:left; 
background-color:#ffa; 
} 

Powodzenia!

Answer 2

Zamiast zmieniać oryginalną klasę css programu bootstrap, utwórz nowy plik css, który zastąpi domyślny styl.

Pamiętaj o dołączeniu nowego pliku css po dodaniu pliku bootstrap.css.

W nowym pliku css zrobić

.form-horizontal .control-label{ 
    text-align:left !important; 
} 

Answer 3

„pull-lewo” jest to, czego potrzebujemy, to wygląda używasz Bootstrap 2, nie jestem pewien, czy to jest dostępne, należy rozważyć bootstrap 3, chyba że Oczywiście jest to wielka poprawka! ... dla Bootstrap 3, ale musisz upewnić się, że masz 12 kolumn w każdym rzędzie, w przeciwnym razie będziesz mieć problemy.

Answer 4

Po prostu moje dwa centy. Jeśli używasz Bootstrap 3, to po prostu dodaję dodatkowy styl do arkusza stylów twojej witryny, który kontroluje styl text-left z .

Jeśli chcesz dodać text-left do etykiety, domyślnie jest inny styl, który zastępuje ten .form-horizontal .control-label. Więc jeśli dodać:

.form-horizontal .control-label.text-left{ 
    text-align: left; 
} 

Następnie zbudowany w stylu text-left nakłada się na etykiecie poprawnie.

Answer 5

Miałem dokładnie ten sam problem. Znalazłem problem w bootstrap.min.css. Musisz zmienić etykietę: label {display:inline-block;} na label {display:block;}

Answer 6

Po prostu dodaj style="text-align: left" do swojej etykiety.