Wie Elemente machen fixiert in Bootstrap

Question

Hallo! Ich mache Gally responsive für alle Bildschirm im Bootstrap. Ich habe auch dafür einige Medienanfragen geschrieben. Auf einem kleinen Bildschirm wie bei 100px-200px wird das Add-to-cart-Symbol unter den "Details" angezeigt.

Ich habe versucht, dies zu beheben, indem ich Position: Fixed für das Symbol, aber es wird jetzt nur am unteren Rand des letzten Bildes angezeigt. Bitte helfen Sie mir bei der Lösung dieses Problems.

Css-Code

@media only screen and (min-width : 100px) and (max-width : 377px) { 

.basket-logo 
{position:fixed; 
bottom:0;} 


    .col-xs-6 
    { 
     margin-right:2px; 
    } 

} 

PHP-Code

 echo " 
      <div id='single_product' class='col-md-3 col-sm-4 col-xs-6'> 

     <h3 style='color:white'; align='center'>$pro_title</h3> 

     <img src='admin_area/product_images/u_seller_product_img/$pro_img' width='180' height='180' /> <br> 

     <p style='color:white'><b>Price: $ $pro_price </b></p> 

     <a href='details.php?pro_id=$pro_id' class='detail_hover'>Details</a> 

     <a href='Home.php?add_cart=$pro_id' style='color:white;' class='basket-logo'> 
     <span class='fa fa-shopping-cart fa-2x'></span></a> 


      </div>     

Answer 1

Im CSS-Teil, Sie display:inline-block für die basket-class versuchen:

.basket-logo { 
    display:inline-block; 
} 

EDIT

Die position:fixed bedeutet, dass alle basket-logo Klassen Inhalt an der gleichen festen Position bleiben (bei 0px von unten in Ihrem Fall). Sie können diese Regel und die bottom:0; auch entfernen.

Answer 2

machen die Struktur wie folgt aus:

<div class="col-md-3 col-sm-4 col-xs-6" > 
<div class="col-xs-12"> - title </div> 
<div class="col-xs-12"> - image</div> 
<div class="col-xs-12">- price</div> 

<div class="col-xs-6"> -detail </div> 
<div class="col-xs-6"> -cart </div> 
</div>