Bootstrap - falsche Spalte auf dem Bildschirm

Question

Ich erstelle einfache Post-Liste mit Thumbnails.
Ich habe diesen Code erstellt:

   <div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3"> 
        <div class="row"> 
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12"> 
          <div class="news"> 
           <div class="news-thumb text-center"> 
            <img src="images/NewsThumb.png" alt="" class="img-responsive" /> 
           </div> 
           <div class="news-excerpt"> 
            <p> 
             Content 
            </p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3"> 
        <div class="row"> 
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12"> 
          <div class="news"> 
           <div class="news-thumb text-center"> 
            <img src="images/NewsThumb.png" alt="" class="img-responsive" /> 
           </div> 
           <div class="news-excerpt"> 
            <p> 
             Content 
            </p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

aber auf FullHD (1920px) I-Werte für col-SM- * bekommen - warum?

Answer 1

Dies liegt daran, dass für Ansichtsfenster oberhalb von col-sm keine überlagerte Spaltenverschiebung besteht. Das bedeutet, dass Ihre Seite als die 6 zentralen Spalten mit dem Offset mit drei Spalten angezeigt wird - sogar auf größeren Bildschirmen.

<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3"> 

Sie benötigen folgende (col-md-Offset-0) zu jedem der Mutter divs hinzufügen den Offset in -md und -lg zu verhindern und die beiden divs zu ermöglichen, nebeneinander angezeigt werden :

<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-0"> 

ich das gerade getestet und es funktioniert nun und zeigt an Seite die Spalten Seite - an dem Code-Schnipsel in Aktion zu sehen (im Vollbildmodus - die Spalten benachbart sind und in dem kleinen Fenster stapeln sie vertikal. Beachten Sie, dass ich farbige Hintergründe hinzugefügt habe, um den Punkt zu demonstrieren.

\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 

 

 
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:red"> 
 
        <div class="row"> 
 
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12"> 
 
          <div class="news"> 
 
           <div class="news-thumb text-center"> 
 
            <img src="images/NewsThumb.png" alt="" class="img-responsive" /> 
 
           </div> 
 
           <div class="news-excerpt"> 
 
            <p> 
 
             Content 
 
            </p> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
       <div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:blue"> 
 
        <div class="row"> 
 
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12"> 
 
          <div class="news"> 
 
           <div class="news-thumb text-center"> 
 
            <img src="images/NewsThumb.png" alt="" class="img-responsive" /> 
 
           </div> 
 
           <div class="news-excerpt"> 
 
            <p> 
 
             Content 
 
            </p> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div>