2013-07-03 4 views
6

Obecnie badam wykorzystanie Twitter bootstrap jako podstawy dla moich przyszłych projektów rozwoju sieci dla klientów. Przeszedłem przez całą standardową dokumentację na ich stronie Github iz mojego zrozumienia, aby efektywnie wykorzystać układ siatki, twoje wiersze mogą zawierać tylko w sumie dwanaście kolumn (składających się z różnych elementów lub jednego elementu).Problemy z siatką bootstrap na Twitterze - Elementy powodujące przepełnienie kontenera podczas zmniejszania rozmiaru okna za pomocą responsywnego

Mając to na uwadze przeprowadziłem mały test z tekstem obejmującym 4 kolumny z rzędu wraz z odsunięciem div obejmującym 6 kolumn. Wydaje się, że to działa dobrze, jednak próbowałem dołączyć do jednego wiersza zawierającego div obejmujący 3 kolumny, które są przesunięte o 9 kolumn (nadal w sumie 12), aby sprawiać wrażenie, że zawartość w div jest wyświetlana bezpośrednio na stronie. Problem polega na tym, że wygląda to dobrze, gdy tryb okna jest dostosowany do pulpitu, jednak gdy zacznę skalować okno, zawartość elementu div jest wypychana z całego kontenera. Jeśli nadal przeskalowuję okno, elementy układają się tak, jak oczekuję w widoku mobilnym.

Moje pytanie brzmi, dlaczego to się zachowuje w ten sposób? Rozumiem, że dopóki istnieją 12 kolumn, zawartość pozostanie zamknięta w ich zewnętrznym kontenerze.

Mój kod można znaleźć poniżej. Istnieje wiele inline css, ale jest to tylko do celów testowych. To jest bootstrap zapasowy z wszystkimi opcjami sprawdzonymi na etapie dostosowywania, co oznacza, że ​​uwzględnione są wszystkie opcje responsywne.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap Example</title> 
    <meta name="viewport" content="width-device-width, initial-scale=1.0"> 
    <!--BOOTSTRAP--> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    </head> 
<body> 
    <div class="container-fluid" style="border: 1px solid #cccccc"> 
     <div class="row-fluid"> 
     <div class="span4">This is a div spanning 4 columns</div> 
     <div class="span6 offset2">This is a div spanning 6 columns. It should appear alongside the column spanning 4 columns.</div> 
     </div> 
     <div class="row-fluid"> 
     <div class="span3 offset9"> 
      <form class="form-search"> 
       <div class="row-fluid"> 
        <div class="input-append span2"> 
         <input type="text" class="input-medium search-query"> 
         <button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> Search </button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
    </div> 
    </body> 
<script src="http://code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</html> 

Dzieje się to bez względu na to, czy używam układu płynów, czy nie. W płynnym przykładzie pole wyszukiwania pojawi się tak, jakby znikało z ekranu. W ustalonym przykładzie nałoży on szarą granicę kontenera.

Odpowiedz

4

Have mieć dodać swój kod tutaj: http://bootply.com/66598

Poniższy obraz pokazać swój problem/pytanie (chyba): enter image description here

do zrozumienia problemu trzeba będzie uczyć się siatkę i zrozumieć różnica między domyślną siatką a siatką płynów, zobacz: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

Twój problem stanie się na ekranach o powiększeniu 767px. Poniżej tej szerokości kolumn (div z class = "span {x}") będzie stos. Na dużych ekranach problem też się nie zdarzy.

Domyślna siatka (Twittera Bootstrap 2.x):

Kiedy zagnieżdżanie wierszach wiersz dziecko dostaje całkowitą rozpiętość które sumują się do rozpiętości jego rodzica.

przykład:

<div class="row"> 
<div class="span6"> 
<!--nesting--> 
    <div class="row"> 
    <div class="span3"></div> 
    <div class="span3"></div> 
    </div> 
</div> 
<div class="span6"> 
</div> 
</div> 

W siatce klasy wzorcowe mają stałą szerokość w pikselach (zależnie od szerokości ekranu), patrz
Pomiędzy 768px i 980px szerokości do: Każdy span1 będzie 940 - (11 rynny po 20 szt.)/12 = 60px (powyżej 980 pikseli (1170-11 * 30)/12 = 70 pikseli).

Teraz masz już ustawiony problem: <input type="text" class="input-medium search-query"> .input-medium da temu wejściu stałą szerokość 150px, a przycisk "search" w postaci zajmuje również spację (75px;). Umieszczasz to w span2 (<div class="input-append span2">) czarownica jest w rozpiętości 3 (<div class="span3 offset9">). Na domyślnej siatce 940 span3 ma szerokość 3x60 + 2x20 = 220px; , podczas gdy twój seachbox ma 75 + 150 = 225px. Z tego powodu Twoja skrzynka przeszukiwania wyskakuje z siatki. Span4 nie będzie mieć tego problemu. Oczywiście to również wyłączy twój span2 .

Siatka cieczy (Twittera bootstrap 2.x i Twitters bootstrap 3):

W siatce płynu każda kolumna (zakres {x}) z uzyskać procent szerokości jej jednostki. Podczas zagnieżdżania wiersz podrzędny można ponownie rozdzielić w kolumnach 12.

przykład:

<div class="row-fluid"> 
<div class="span6"> 
<!--nesting--> 
    <div class="row"> 
    <div class="span6">50% of the parent and 25% of the grid</div> 
    <div class="span6">50% of the parent and 25% of the grid</div> 
    </div> 
</div> 
<div class="span6"> 
    <div class="row"> 
    <div class="span12">100% of the parent and 50% of the grid</div> 
    </div> 
</div> 
</div> 

W danym przypadku swoją SearchBox jest zagnieżdżony w span2 w span3. Span3 będzie miał około 25% szerokości siatki. Kiedy 25% twojej siatki szerokości będzie mniejsze niż 225px, pole wyszukiwania będzie rozbić siatkę. Twój problem zacznie się więc od szerokości ekranu 4 x 225 = 900px (tuż poniżej domyślnej siatki 940 pikseli). Również tutaj pomoże to umieścić twoją skrzynię w polu 4 lub 5. UWAGA <div class="input-append span2"> będzie miała szerokość 16,6% z 25% siatki (bardzo mała).

Możliwe rozwiązanie: Użyj klasy wyciąganej prawo do SearchBox:

<div class="row-fluid"> 
    <div class="span3 offset9"> 
     <form class="form-search"> 

       <div class="input-append pull-right"> 
        <input type="text" class="input-medium search-query"> 
        <button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> Search </button> 
       </div> 

     </form> 
    </div> 
</div> 
Powiązane problemy