Bootstrap-Spalten können nicht so funktionieren, wie ich es möchte

Also versuche ich einen Abschnitt auf der Seite, so dass es 2 Sätze eines Bildes und Wörter auf jeder Zeile gibt, wenn der Bildschirm in LG und MD-Modi ist .Bootstrap-Spalten können nicht so funktionieren, wie ich es möchte

so sollte es so etwas wie dies geht ...
(img) (Worte ...) (img) (Worte ...)
(img) (Worte ...) (img) (Worte ...)

<div class="container rowSpacing"> 
      <h1 class="text-center">We Capture All Memories...</h1> 
      <div class="row"> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <img src="images/NewLogo.png" class="img-responsive" alt="..."> 
       </div> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <h2>Your loved ones...</h2> 
       </div> 

       <div class="clearfix"></div> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <img src="images/NewLogo.png" class="img-responsive" alt="..."> 
       </div> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <h2>Your special day...</h2> 
       </div> 

       <div class="clearfix"></div> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <img src="images/NewLogo.png" class="img-responsive" alt="..."> 
       </div> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <h2>Your last moments...</h2> 
       </div> 

       <div class="clearfix"></div> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <img src="images/NewLogo.png" class="img-responsive" alt="..."> 
       </div> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <h2>Your beautiful moments...</h2> 
       </div> 
      </div> 
     </div>

Quelle

2017-03-16 Caarn

das ist, was es für mich aussieht? Vielleicht verstehe ich das Endziel/Problem falsch. http://codepen.io/anon/pen/LWzdax –

Vielen Dank! .. Langsam, aber sicher lernen diese Sachen. – Caarn

Versuchen Sie, die

<div class="clearfix"></div>

entfernen und jede der Spalten auf eine Menge Höheneinstellung

Quelle

2017-03-16 00:28:20

Danke David! Manchmal fühle ich mich dumm, wenn es so einfach ist. – Caarn

Keine Sorge, ich habe viel Zeit damit verbracht, meinen Kopf gegen die Wand zu schlagen, die mit CSS zu tun hat. Kann manchmal sehr verwirrend sein. Wenn dies Ihre Lösung war, markieren Sie bitte die Antwort als richtig, danke. –

Nein, es funktionierte immer noch nicht für mich – Caarn

<div class="container rowSpacing"> 
      <h1 class="text-center">We Capture All Memories...</h1> 



      <div class="row"> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <img src="images/NewLogo.png" class="img-responsive" alt="..."> 
       </div> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <h2>Your loved ones...</h2> 
       </div> 



       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <img src="images/NewLogo.png" class="img-responsive" alt="..."> 
       </div> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <h2>Your special day...</h2> 
       </div> 

    </div> 
    <div class="row"> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <img src="images/NewLogo.png" class="img-responsive" alt="..."> 
       </div> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <h2>Your last moments...</h2> 
       </div> 



       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <img src="images/NewLogo.png" class="img-responsive" alt="..."> 
       </div> 

       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6"> 
        <h2>Your beautiful moments...</h2> 
       </div> 

    </div> 

      </div>

sample code

Quelle

2017-03-16 00:32:19

Das funktionierte nicht für mich entweder – Caarn

Sie müssen nur die clearfix DIV nach dem zweiten und nach dem sechsten Paar Bilder + Texte entfernen:

http://codepen.io/anon/pen/aJLYeZ

Quelle

2017-03-16 00:37:17 Johannes

Ich bekomme nicht die gleichen Ergebnisse wie du bist. Es sieht immer noch durcheinander. – Caarn

Bootstrap-Spalten können nicht so funktionieren, wie ich es möchte

Antwort

Verwandte Themen