Question

我使用以下div来显示图像，描述，内容。 div的高度固定为416px。这工作正常。直到现在我们在移动设备上显示单列。根据我们目前的要求，我们希望在移动设备中显示三行。

我修改了

<div class="categoryProduct col-lg-3 col-md-4 col-sm-5 col-xs-12" >

到

<div class="categoryProduct col-lg-3 col-md-4 col-sm-5 col-xs-6" > or 
<div class="categoryProduct col-lg-3 col-md-4 col-sm-5 col-xs-4" >

我注意到，由于高度固定为416，因此当我们缩小尺寸时，行之间会有很多间隙。如何根据设备重置大小。

以下是div标记代码

<div class="categoryProduct col-lg-3 col-md-4 col-sm-5 col-xs-12" >

    <div class="slides">
               <img src="src" width="222" height="296" />

    </div>

    <div class="productText" style="border-top: 1px solid #f0f0f0;">

            <p class="product-list-designer">Designer</p>


        <p class="product-list-title">Title</p>
        <p class="product-list-price">Text</p>


    </div>

</div>

以下是css代码

div.categoryProduct {
 background-color: transparent;
    float: left;
    height: 418px;
    padding: 5px 15px 20px;
}

div.categoryProduct div.productImage {
    padding-bottom: 3px;
    border-bottom: 1px solid #f0f0f0;
}

div.categoryProduct div.productImage a {
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

我尝试添加自定义高度没有任何效果。如果我尝试删除高度设置，列对齐将丢失，结果页面看起来非常不整洁。我尝试为div列添加min-height。

我迷失了col-xs部分休息所有渲染都发生了。

降低小型设备中色谱柱的高度（col-xs）

0 个答案: