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 -->
8
Niall O'Brien 30 sierpień 2012, 15:31

2 odpowiedzi

Najlepsza odpowiedź

Dokumenty tak naprawdę mówią:

Użyj .span1 do .span12 dla 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.

30
Pavlo 23 kwiecień 2013, 10:49

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.

0
dpsthree 2 marzec 2015, 18:37