bootstrap Spalten sitzen auf einander

Question

Ich bin ein Anfänger mit Bootstrap. Ich versuche, den Hauptinhalt links und eine Seitenspalte rechts zu haben. Für die mobile Ansicht möchte ich, dass die rechte Spalte unter den Hauptinhalt fällt.

Egal was ich versuche, die Seite Spalte ist entweder direkt auf der Hauptinhaltsspalte oder es sitzt auf der rechten Seite, ist aber immer noch ontop der Hauptinhaltsspalte.

<div class="col-sm-3 col-sm-offset-1"> 
     <div class="sidebar-module sidebar-module-inset"> 
     <h4>About</h4> 
     <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> 
     </div> 
     <div class="sidebar-module"> 
     <h4>Archives</h4> 
     <ol class="list-unstyled"> 
      <li><a href="#">March 2014</a></li> 
      <li><a href="#">February 2014</a></li> 
      <li><a href="#">January 2014</a></li> 
      <li><a href="#">December 2013</a></li> 
      <li><a href="#">November 2013</a></li> 
      <li><a href="#">October 2013</a></li> 
      <li><a href="#">September 2013</a></li> 
      <li><a href="#">August 2013</a></li> 
      <li><a href="#">July 2013</a></li> 
      <li><a href="#">June 2013</a></li> 
      <li><a href="#">May 2013</a></li> 
      <li><a href="#">April 2013</a></li> 
     </ol> 
     </div> 
     <div class="sidebar-module"> 
     <h4>Elsewhere</h4> 
     <ol class="list-unstyled"> 
      <li><a href="#">GitHub</a></li> 
      <li><a href="#">Twitter</a></li> 
      <li><a href="#">Facebook</a></li> 
     </ol> 
     </div> 
    </div><!-- /.blog-sidebar --> 

<!-- I'm using ruby on rails so 'yeild' is where the main content shows --> 
<div class="col-sm-9"> <%= yield %> </div> 

Dieses wie eine ziemlich gemeinsame grundlegende Sache scheint in bootsrap zu tun, so ist es frustrierend, dass ich es bekommen kann nicht. Was läuft falsch?

Here is a fiddle

Answer 1

Dies ist die richtige Markup. Spalten immer innerhalb eines Zeilen-Divs umbrechen. Außerdem verwendeten Sie einen Offset, wo es nicht benötigt wurde. Mit col-xs-12 nehmen Sie die gesamte Breite des mobilen Bildschirms, was dazu führt, dass die linke Seitenleiste darunter geht:

<div class="row"> 
<!-- I'm using ruby on rails so 'yeild' is where the main content shows --> 
<div class="col-sm-9 col-xs-12"> <%= yield %> </div> 

<div class="col-sm-3 col-xs-12"> 
     <div class="sidebar-module sidebar-module-inset"> 
     <h4>About</h4> 
     <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> 
     </div> 
     <div class="sidebar-module"> 
     <h4>Archives</h4> 
     <ol class="list-unstyled"> 
      <li><a href="#">March 2014</a></li> 
      <li><a href="#">February 2014</a></li> 
      <li><a href="#">January 2014</a></li> 
      <li><a href="#">December 2013</a></li> 
      <li><a href="#">November 2013</a></li> 
      <li><a href="#">October 2013</a></li> 
      <li><a href="#">September 2013</a></li> 
      <li><a href="#">August 2013</a></li> 
      <li><a href="#">July 2013</a></li> 
      <li><a href="#">June 2013</a></li> 
      <li><a href="#">May 2013</a></li> 
      <li><a href="#">April 2013</a></li> 
     </ol> 
     </div> 
     <div class="sidebar-module"> 
     <h4>Elsewhere</h4> 
     <ol class="list-unstyled"> 
      <li><a href="#">GitHub</a></li> 
      <li><a href="#">Twitter</a></li> 
      <li><a href="#">Facebook</a></li> 
     </ol> 
     </div> 
    </div><!-- /.blog-sidebar --> 

</div>