Mam problem z rozwiązaniem tego problemu. Dokumenty mówią, że powinienem ustawić span równy span nadrzędnemu, jednak rozciąga się on na prawo poza pojemnikiem studni, kiedy to robię. Wygląda dobrze na telefonie komórkowym (wysuwa odpowiednią ilość w prawo, wypełniając zagłębienie), jednak nie gra dobrze na komputerze stacjonarnym (chcę, aby pola rozciągały się wewnątrz zagłębienia).
<div class="container">
<div class="row">
<div class="span4 offset4">
<div id="login-panel">
<div class="well bordered clearfix">
<div class="text-center">
<div class="page-header" style="border-bottom: none; margin: 0;">
<img src="library/img/logo-01.png"/>
</div>
</div>
<form method="POST" action="#" accept-charset="UTF-8" class="pull-left">
<legend>App name</legend>
<div class="control-group ">
<!-- username field -->
<div class="controls">
<label>Email</label>
<input class="span4" type="text" name="email" value="" id="email" placeholder="Your email address">
</div>
</div>
<div class="control-group">
<label>Password</label>
<!-- password field -->
<input type="password" name="password" id="password" placeholder="Password">
</div>
<div class="control-group ">
<p>
<input class="btn btn-default pull-left" type="submit" value="Sign-up">
<input class="btn btn-primary pull-right" type="submit" value="Login">
</p>
</div>
</form>
</div>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
2 odpowiedzi
Dokumenty tak naprawdę mówią:
Użyj
.span1do.span12dla danych wejściowych, które pasują do tych samych rozmiarów siatki kolumny.
Ale chcesz zrobić <input> o pełnej szerokości, prawda?
Zrób <input>, aby zająć pełną szerokość
input.full-width {
box-sizing: border-box;
width: 100%;
height: 30px;
}
Usuń również .pull-left z <form>. Zobacz, jak to działa na tych skrzypcach.
Edytować
Od wersji Bootstrap 2.2.0 do osiągnięcia tego efektu używaj dołączonej klasy input-block-level.
Ostatnio natknąłem się na ten problem z formą i korpusem panelu. Po oględzinach zauważyłem, że problemem nie były dane wejściowe, ale sam formularz wykraczający poza panel. Naprawiłem to, umieszczając w formularzu max-width: 100% zamiast danych wejściowych.
Podobne pytania
Powiązane pytania
Nowe pytania
forms
Formularz to zasadniczo kontener, którego można używać do przechowywania dowolnej ilości dowolnego podzbioru kilku typów danych. Formularze HTML służą do przekazywania danych na serwer. Formularze VB i C # to okna używane do interakcji z użytkownikiem.