CSS - Bootstrap: unter 767px Viewports 2 Spannen (oder mehr) pro Zeile statt 1

Question

gibt es eine Standardmethode mit Bootstrap oder wie kann ich bearbeiten, um dies unter 767px (mobile) jeder überbrückt innerhalb einer Zeile wird nicht zu tun 100%? Ich will nur, dass sie zu 50% gehen ... um zB 2 Spannen nebeneinander statt untereinander zu haben.

Dank im Voraus

Answer 1

Try Zeilen Flüssigkeit statt Reihe mit zwei span6.

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; 
} 

Check hier jsFiddle

Answer 2

Ich weiß, diese Frage ist alt, aber ich kam über sie, während für eine Lösung dieses gleiche Problem suchen, dann habe ich es selbst herausgefunden. Ich dachte, ich sollte meine Lösung posten, falls jemand diese Seite findet.

Mein Problem war, dass ich eine reaktionsschnelle Bootstrap-Seite mit vier Spalten (vier span3 Listenelemente) und eine andere Seite mit drei Spalten (drei span4 Listenelemente) hatte. Ich wollte, dass sich beide unter 767px in zwei Spalten verwandelten. Meine Struktur ist, wie dies für die Vier-Säulen-Seite, mit Zeilen Flüssigkeit wiederholt mehrmals innerhalb 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> 

Und meine Struktur ist, wie dies für die Drei-Säulen-Seite, wieder mit Zeilen Flüssigkeit mehrmals wiederholt Inside span12:

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

Diese Struktur stammt aus dem Bootstrap-Bereich über Thumbnails. Hier ist die CSS ich beide zu machen hinzugefügt werden zu zwei Spalten unter 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 
} 
} 

Sie haben diese Wähler ändern, wenn Sie nicht die gleiche Struktur verwenden. Sie sind auch nicht die elegantesten Selektoren, also wenn Sie sie besser schreiben können, tun Sie es bitte. Sobald ich sie angestellt hatte, konnte ich mich nicht mehr darum kümmern, mit ihnen zu spielen. Ich hoffe, das hilft jemandem!

[edit] Ich habe gerade festgestellt, dass ich tatsächlich in meinem Code Fließreihen benutze, nicht Reihenflüssigkeit ... also müssen Sie es vielleicht ändern. In meinem Stylesheet hat fluid-row allerdings keine Regeln.

Verbindung mit der richtigen Selektoren in CSS Geige: http://jsfiddle.net/rUCgS/4/

Answer 3

ich das Verhalten von .row-fluid [class*="span"] innerhalb @media (max-width: 767px) { ... } einfach modifiziert und verändert es zurück, wenn ich max-width: 480px getroffen. Ich fügte auch eine Klasse .span-control zu den 2 ersten Spannen einer Reihe hinzu, um sicherzustellen, dass sie beide ihren margin-left entfernt haben.

Sollte aussehen this

Die !important Tags für jsfiddle nützlich waren, aber Sie werden sie nicht in Ihrem Stylesheet müssen.