bootstrap-Frage

G

glupto

Grünschnabel
Hallo, ich versuche von meiner existierenden Seite eine responsive-Version zu erstellen mit Hilfe von bootstrap. Das erweist sich als schwierig. Ich habe drei columns mit Listen nebeneinander, jeweils 10 - 20 Zeilen, das Ganze sechs Mal untereinander. Auf kleineren Monitoren sollen es zwei Spalten werden mit der Reihenfolge: 3. Column rutscht unter die erste, vierte (aus der zweiten Reihe rutscht rechts daneben usw. Wenn ich jetzt aber das Browserfenster verkleinere rutscht die dritte Column unter die zweite, ich schicke zwei Screenshots mit 1. normale breite 2. Fenster verkleinert. Und hier ist die Codepassage

HTML: 
  <div class="row">

            <div class="col-xs-6 col-md-4">
            <h1>1</h1>
         <ul>  
                 
          <?php

feedholen("http://www.feed1");

?>   

          </ul>
            </div><!--/span--> 
            
            <div class="col-xs-6 col-md-4">
                           <h1>2</h1>        
<ul>  
          <?php

verarbeiteFeed("http://www.feed2");

?>   

          </ul>
            </div>
            <!--/span-->        
            <div class="col-xs-6 col-md-4">
                       
     <h1>3</h1>        
       
               <ul>     
          <?php

verarbeiteFeed("http://www.feed3");

?>   
</ul>
            
            </div>

Danke
Gruß
glupto
 

Anhänge

  • sc1.jpg
    sc1.jpg
    178,6 KB · Aufrufe: 10
  • sc2.jpg
    sc2.jpg
    169,8 KB · Aufrufe: 11
Jan-Frederik Stieler hat gesagt.:
Hi,
dein Problem resultiert daraus das deine zweite Spalte kürzer als die erste ist.
Dies ist ein Problem des floatings. Definiere doch ein min-height für die zweite Spalte.

http://jsbin.com/eqIQiMOG/2/edit

Grüße
Zum Vergrößern anklicken....

Danke für die Antwort, aber ich hatte schon ein min-height eingefügt in der bootstrap.css:

Code: 
.col-xs-6 {
  width: 50%;
 min-height: 380px;
 margin-bottom: 20px;
}


  .col-md-4 {
    width: 33.33333333333333%;
  min-height: 380px;
  margin-bottom: 20px;
  }

Aber beim zusammenschieben des Browser-Fensters wird die Column ja immer länger und relativ gesehen, bleibt die zweite immer kürzer, so dass die dritte sich dann das nächstkleinere sucht und das ist die zweite, die ja bei der min-height-Höhe bleibt...

Zweites Problem ist für mich, dass die navbar kurzzeitig zweireihig wird, bevor der eingesparte Teil nur noch als Logo präsent ist und wieder einzeilig, wie es sich gehört....

Gruß
pto
 

Anhänge

  • ScreenHunter_02 Jan. 06 22.56.jpg
    ScreenHunter_02 Jan. 06 22.56.jpg
    46,9 KB · Aufrufe: 7
  • ScreenHunter_03 Jan. 06 22.57.jpg
    ScreenHunter_03 Jan. 06 22.57.jpg
    5,4 KB · Aufrufe: 9
Hi,
also eine andere Lösung fällt mir jetzt auch nicht ein.
Eine andere Möglichkeit wäre die Höhe immer per JS zu berechnen so das diese immer gleich-groß wie die der ersten Spalte ist. Aber das wäre ein wenig übertrieben.

Man könnte zwar auch ein Konstrukt mit xs-hidden und pull-left bauen, aber davon würd ich abraten.

Vielleicht hatt ja noch jemand eine Idee?


Was dein zweites Problem betrifft, das lässt sich nur soweit umgehen das du eine weitere Größe in deine MediaQueries einbaust.


Grüße
 
Jan-Frederik Stieler hat gesagt.:
Hi,
also eine andere Lösung fällt mir jetzt auch nicht ein.
Eine andere Möglichkeit wäre die Höhe immer per JS zu berechnen so das diese immer gleich-groß wie die der ersten Spalte ist. Aber das wäre ein wenig übertrieben.

Man könnte zwar auch ein Konstrukt mit xs-hidden und pull-left bauen, aber davon würd ich abraten.

Vielleicht hatt ja noch jemand eine Idee?


Was dein zweites Problem betrifft, das lässt sich nur soweit umgehen das du eine weitere Größe in deine MediaQueries einbaust.


Grüße
Zum Vergrößern anklicken....

Nachfrage zum 2. Problem. Wo finde ich denn bei bootstrap die Standard-Einstellungen, ab welcher Breite die navbar ausgeblendet und in ein Symbol "verbannt" wird? Für mich könnte es eigentlich bei allem unter 90% losgehen...
 
Hi,
in der Dokumentation steht das du diesen über @grid-float-breakpoint einstellen kannst. Vorausgesetzt du verwendest LESS. In einer normalen CSS müsstest du mal die CSS nach .navbar-collapse durchsuchen und schauen unter welchen Größen was da eingestellt ist.

Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück