2016-05-08 3 views
0

Ich habe eine Seite, die aus einer festen Navbar, feste Fußzeile bestehen und dazwischen habe ich ein Bootstrap-Jumbotron. Der Inhalt des Jumbotrons wurde in zwei Spalten aufgeteilt (eine mit id = "tasks" & andere mit id = "view"). Wenn ich die Größe des Browsers wie erwartet ändern, werden die beiden Spalten übereinander gestapelt. Das Problem besteht darin, dass, da die linke Spalte aus weniger Inhalt besteht, nach der Browser-Größenänderung (und nachdem die linke Spalte über der rechten Spalte gestapelt wird), die Breite des Jumbotrons nun gleich der Breite der linken Spalte ist die rechte Spalte führen ist, ist jetzt nicht vollständig innerhalb des jumbotron
Below CodeMachen Sie eine Bootstrap-Jumbotron Breite erweitern sich mindestens bis zur Menge des Inhalts

<body> 
    <div id="header"> 
     <?php echo $navbar; ?> 
    </div> 
    <div id="jumbotron" class="jumbotron row"> 
    <div class="container-fluid"> 
     <div id="tasks" class="col-md-2">//the left column contains fewer contents 
      <?php echo $task_set; ?> 
     </div> 
     <div id="view" class="col-md-8 col-md-offset-1">//the right-column 
      <?php echo $view_to_load ?> 
     </div> 
    </div> 
    </div> 

    <div id="footer" class="row"> 
    <?php echo $footer; ?> 
    </div> 
</body> 

Bitte sagen Sie mir, wie kann ich die jumbotron Breite gleich machen Widt h der rechten Spalte, d. h. die Spalte mit id = "" view

+0

Wenn Sie die gleiche von allen Bildschirm hinzufügen möchten hinzufügen Klasse auf Col-Xs, was Sie brauchen, ändern Sie den Klassentyp für mobile Tablet oder was Sie versuchen – Noni

Antwort

0

Sie müssen verschiedene Klassen implementieren, wenn Ihr Darstellungsbereich kleiner ist. Also pro Beispiel <div class="col-md-2 col-sm-12">, wenn Sie es in voller Größe auf einem kleinen Ansichtsfenster möchten.

Verwandte Themen