如何在bootstrap中修复元素

Question

您好！ 我正在为引导程序中的所有屏幕做出响应。我也为此写了一些媒体查询。 在100px-200px的小屏幕上，添加到购物车的图标显示在＆＃34;详细信息＆＃34;下面。

我尝试通过写位置来修复此问题：已修复图标，但现在只显示在最后一张图像的底部。 请帮我解决这个问题。

Css代码

@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

在CSS部分中，您可以display:inline-block尝试basket-class：

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

编辑

position:fixed表示所有basket-logo类内容都保持在同一个固定位置（在您的情况下距离底部0px）。您也可以删除该规则和bottom:0;。

Answer 2

制作如下结构：

<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>