CSS - Bootstrap: poniżej 767px rzutnie 2 przęsła (lub więcej) na rzędy zamiast 1

Question

jest domyślna metoda z Bootstrap lub jak mogę edytować poniżej 767px (mobilny), każdy zakres w rzędzie nie staje się 100%? Po prostu chcę, żeby były w 50% ... mieć na przykład 2 przęsła obok siebie zamiast jednego pod drugim.

Z góry z góry

Answer 1

Spróbuj płynu rzędu zamiast wiersza z dwoma rozpiętościami 6.

HTML:

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel='stylesheet' type='text/css' /> 
<div id='wrap' class='container'> 
     <div id='row1' class='row-fluid'> 
      <div id='box1' class='span6'> 
       box1 
      </div> 
      <div id='box2' class='span6'> 
       box2 
       </div> 
     </div> 
</div> 

CSS:

#wrap{ 
    background-color:black; 
    height:50px; 
} 
#box1{ 
     background-color:green; 
} 

#box2{ 
     background-color:red; 
} 

sprawdzić tutaj jsFiddle

Answer 2

Wiem, że to pytanie jest stary, ale natknąłem się na nią, patrząc na rozwiązanie tego samego problemu, potem sam to rozgryzłem. Pomyślałem, że powinienem opublikować moje rozwiązanie na wypadek, gdyby ktoś znalazł tę stronę.

Mój problem polegał na tym, że miałem responsywną stronę Bootstrap z czterema kolumnami (cztery pozycje listy span3) i inną stroną z trzema kolumnami (trzy pozycje listy span4). Chciałem, aby oba z nich zmieniły się w dwie kolumny, gdy mają mniej niż 767 pikseli. Moja struktura jest podobny do tego na stronie cztery kolumny z wierszy płyn powtarzać kilkakrotnie wewnątrz span12:

<div class="span12"> 
    <div class="row-fluid"> 
     <ul class="thumbnails"> 
      <li class="span3"></li> 
      <li class="span3"></li> 
      <li class="span3"></li> 
      <li class="span3"></li> 
     </ul> 
    </div> 
    </div> 

A moja konstrukcja jest tak dla strony trzy kolumny, dzięki wiersz płyn powtarzać kilka razy wewnątrz span12:

Ta struktura pochodzi z sekcji Bootstrap o miniaturach. Oto CSS Dodałem do obu z nich zamieni się w dwóch kolumnach poniżej 767px:

@media screen and (max-width: 767px) { 
/* remove clear from each ul to stop them from breaking into rows */ 
ul.thumbnails::after { 
    clear: none; 
} 

/* make the width of each span equal to 47% instead of 100%. 
You could make it closer to 50% if you have no borders or padding etc. */ 
ul.thumbnails li[class*="span"]{ 
    width: 47%; 
    float: left; 
} 
    // select the second span in each row (ul) on the 3 column page 
[class*="span"] .span4:nth-child(2), 
    // select the first span in the even rows on the 3 column page 
[class*="span"] .row-fluid:nth-child(even) .span4:nth-child(1), 
    // select the even spans in each row on the 4 column page 
[class*="span"] .span3:nth-child(even) 
{ 
    float: right; //float them all to the right 
} 
} 

Będziesz musiał dostosować te selektorów, jeśli nie używasz taką samą strukturę. Nie są to najbardziej eleganckie selektory, więc jeśli możesz napisać je lepiej, proszę. Gdy tylko zacząłem pracować, nie mogłem już się z nimi bawić. Mam nadzieję, że to pomoże komuś!

[edytuj] Właśnie zauważyłem, że faktycznie używam płynnego rzędu we wszystkich moich kodach, a nie w płynnym rzędzie ... więc może będziesz musiał to zmienić. fluid-row nie ma żadnych reguł w moim arkuszu stylów.

Link do skrzypce z poprawnymi selektorów CSS: http://jsfiddle.net/rUCgS/4/

Answer 3

po prostu zmodyfikowane zachowanie .row-fluid [class*="span"] wewnątrz @media (max-width: 767px) { ... } i zmienił go z powrotem, gdy uderzę max-width: 480px. Dodałem także klasę .span-control do 2 pierwszych zakresów rzędu, aby upewnić się, że oba mają swój margines - z lewej strony.

powinien wyglądać this

W !important tagi były użyteczne dla jsfiddle, ale nie trzeba ich w arkuszu stylów.