# bootstrap-Frage



## glupto (5. Januar 2014)

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


```
<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


----------



## Jan-Frederik Stieler (6. Januar 2014)

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


----------



## glupto (6. Januar 2014)

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.
> 
> ...



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


```
.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


----------



## Jan-Frederik Stieler (7. Januar 2014)

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


----------



## glupto (7. Januar 2014)

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.
> 
> ...



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...


----------



## Jan-Frederik Stieler (7. Januar 2014)

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


----------



## glupto (7. Januar 2014)

Danke für die schnelle und nette Hilfe!


----------

