How to dehnbar machen bootstrap div nach mobile, tablet, desktop

Question

Ich lerne Bootstrap-Framework und fand es sehr interessant. Ich habe eine Website gesehen, die gleichzeitig auf Mobilgeräten, Tablets und Laptops funktioniert. Ich sah vier div in der Seite in einer Zeile und wenn ein Benutzer die Seite dehnen, verbirgt es die zwei div und macht es schön Sicht auf dem Tablet und wenn ich dehne es mehr nach der mobilen Größe es verbirgt die 3 Div und Display nur eins mit schönen CSS-Effekten.

Bitte werfen Sie einen Blick auf die folgenden drei Bilder und sehen Sie die gewünschten Effekte, die ich erreichen muss.

Ich brauche nur das gleiche mit Bootstrap zu implementieren. Bitte führen Sie alle oder teilen Sie den Beispielcode, um zu verstehen. Vielen Dank im Voraus.

Answer 1

Sie können so etwas tun, um die gewünschten Ergebnisse zu erzielen. Bootstrap gibt Ihnen Kontrolle darüber, wie sich Ihr Div Block auf verschiedenen Geräten oder Bildschirmgrößen verhält.

Überprüfen Sie den folgenden Code.

<div class="contaniner"> 
    <div class="row"> 
    <div class="col-md-12"> 
    <div class="col-md-3 col-sm-6 col-xs-12"> 
     <div class="col-md-12 col-sm-4 col-xs-6"> 
     <img src="http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg" class="img-responsive"/> 
     </div> 
     <div class="col-md-12 col-sm-8 col-xs-6"> 
     <h4 class="h4"> Some text Here...</h4> 
     <p> Some more text Here...</p> 
     </div> 
    </div> 
    <div class="col-md-3 col-sm-6 col-xs-12"> 
     <div class="col-md-12 col-sm-4 col-xs-6"> 
     <img src="http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg" class="img-responsive"/> 
     </div> 
     <div class="col-md-12 col-sm-8 col-xs-6"> 
     <h4 class="h4"> Some text Here...</h4> 
     <p> Some more text Here...</p> 
     </div> 
    </div> 
    <div class="col-md-3 col-sm-6 col-xs-12"> 
     <div class="col-md-12 col-sm-4 col-xs-6"> 
     <img src="http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg" class="img-responsive"/> 
     </div> 
     <div class="col-md-12 col-sm-8 col-xs-6"> 
     <h4 class="h4"> Some text Here...</h4> 
     <p> Some more text Here...</p> 
     </div> 
    </div> 
    <div class="col-md-3 col-sm-6 col-xs-12"> 
     <div class="col-md-12 col-sm-4 col-xs-6"> 
     <img src="http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg" class="img-responsive"/> 
     </div> 
     <div class="col-md-12 col-sm-8 col-xs-6"> 
     <h4 class="h4"> Some text Here...</h4> 
     <p> Some more text Here...</p> 
     </div> 
    </div> 
    </div> 
    </div> 
</div>