Seitenleiste oben und unten um den Hauptinhalt mit Bootstrap teilen

Ich versuche Bootstrap zu verwenden, um eine linksbündig ausgerichtete Seitenleiste in zwei verschiedene Teile zu teilen, wenn die Bildschirmgröße in der Nähe der Auflösung der mobilen Geräte liegt. This StackOverflow post erstellt, was ich versuche, aber wie aus dem Bild unten zu sehen, habe ich Probleme mit der Spaltenumhüllung beim Versuch, die Sidebar als einen verbundenen Abschnitt anzuzeigen.Seitenleiste oben und unten um den Hauptinhalt mit Bootstrap teilen

Das Bild unten zeigt den oberen Rand der Seitenleiste in grün, den unteren Rand der Seitenleiste in blau und den Hauptinhaltsabschnitt in rot. Ich versuche nur, die Ober- und Unterseite der Seitenleisten bei dieser bestimmten Bildschirmgröße zu verbinden.

BootstrapSidebarSplitImg (kann nicht img einfügen, bis mein rep höher .. ist>. <)

Hier ist der Code, den ich direkt von der Verbindung, die ich vorher erwähnt gezogen habe. Der Code ist derselbe, aber aus irgendeinem Grund wird die Spalte der unteren Seitenleiste am Ende des Textes für den vorherigen Inhaltsabschnitt umbrochen.

@media (min-width: 768px) { 
 
    .col-sm-pull-right { 
 
     float: right; 
 
    } 
 
} 
 
.lower { 
 
    clear: left; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 
    <meta charset="UTF-8"> 
 
    <title>test Sidebar Split</title> 
 
    <link rel="stylesheet" href="style/main.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="upper col-sm-3" style="background:red"> 
 
     <h3>I want to be <b>above</b> the main content on small screens!</h3> 
 
     </div> 
 
     <div class="col-sm-9 col-sm-pull-right" style="border: 3px solid blue"> 
 
     <h1>Main content</h1> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     <p>Lorem ipsum dolor sit amet</p> 
 
     </div>  
 
     <div class="lower col-sm-3" style="background:green"> 
 
     <h3>I want to fill the white space above!</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <!-- scripts at bottom --> 
 
    <script 
 
\t \t \t src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
\t \t \t integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
\t \t \t crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
</body> 
 
</html>

Ich würde es vorziehen, eine Lösung zu finden, die nicht mit erfordert etwas ganz anderes wie Show/Ausblenden Abschnitte zu tun.

Alle Ideen würden sehr geschätzt werden! Vielen Dank!

Quelle

2016-10-17 Louis iaeger V

Dank der Entwicklerwerkzeuge von Google Chrome konnte ich feststellen, dass der Code in Ordnung war, er wurde während der Laufzeit nur durch den Bootstrap-Code zurückgesetzt. Sobald ich das erkannte, musste ich nur noch "! Wichtig" zu der Float-Right-Anweisung hinzufügen und es fing an zu arbeiten.

@media (min-width: 768px) { 
    .col-sm-pull-right { 
     float: right !important; 
    } 
} 
.lower { 
    clear: left; 
}

Quelle

2016-10-17 22:25:02

Seitenleiste oben und unten um den Hauptinhalt mit Bootstrap teilen

Antwort

Verwandte Themen