Question

我正在创建一个虚拟商店，其中主页面显示产品，这是产品细节中的信息量变化，块开始变形的地方。你怎么能保持大小不变，在任何情况下文本都被截断？

我正在使用MVC 5和Bootstrap。

                <!-- Bloque 1 -->
                @foreach (var item in Model)
                {
                    <div class="col-sm-3 col-lg-3 col-md-3">
                        <div class="thumbnail">
                            <!-- TRAE UNA IMAGEN DE CUALQUIER MANERA-->
                            <img src="@Url.Action("RenderImage", new { id = item.ProductoID})" alt="" width="150" height="320" />
                            <div class="panel panel-yellow">
                                <div class="panel-heading">
                                    <h4 class="pull-right">$@item.PrecioUnitario</h4>
                                    <h4>
                                        <a href="@Url.Action("Detalle", new { id = item.ProductoID })" class="my-class">
                                            @item.Nombre
                                        </a>
                                    </h4>
                                </div>
                            </div>

                            <div class="ratings">
                                @*<p>See more snippets like this online store item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>*@
                                <p>@item.DetallesCorto</p>
                            </div>

                            <div class="ratings">
                                <p class="pull-right">15 Me gusta</p>
                                <p>
                                    <span class="fa fa-fw fa-star"></span>
                                    <span class="fa fa-fw fa-star"></span>
                                    <span class="fa fa-fw fa-star"></span>
                                    <span class="fa fa-fw fa-star"></span>
                                    <span class="fa fa-fw fa-star"></span>
                                </p>
                                <p>
                                    <button type="button" class="AddLink btn btn-block btn-success btn-xs" href="#" data-id="@item.ProductoID" data-toggle="modal" data-target="#myModal">
                                        <i class="fa fa-fw fa-shopping-cart"></i> Agregar
                                    </button>
                                </p>
                            </div>

                            <div class="ratings">
                                @if (Request.IsAuthenticated && User.IsInRole("Root") || User.IsInRole("Admin"))
                                {                                        
                                    <p>
                                        <button type="button" class="anchorDetail btn btn-block btn-info btn-xs"
                                                href="javascript:void(0);" data-id="@item.ProductoID">
                                            <i class="fa fa-pencil"></i> Edicion rápida
                                        </button>
                                    </p>
                                    <p>
                                        <button type="button" class="popupDelete btn btn-block btn-danger btn-xs"
                                                href="javascript:void(0);" data-id="@item.ProductoID">
                                            <i class="fa fa-trash"></i> Eliminar
                                        </button>
                                    </p>
                                }
                            </div>
                        </div>
                    </div>
                } <!-- Cierro Forech -->
            </div>

现在的样子：

Answer 1

解决方案1（CSS）

在红色段落和标题上设置固定高度并隐藏溢出。

.thumbnail .ratings:nth-of-type(1) p {height: 100px; overflow: hidden;}
.thumbnail h4:nth-child(2) {height: 30px; overflow: hidden;}

解决方案2（jQuery）

创建一个javascript函数，设置高度等于最高的红色段落和最高的标题。

var maxh = 0;
$('.thumbnail .ratings:nth-of-type(1) p').each(function() {
  var h = $(this).height();
  if(h > maxh) maxh = h;
});
$('.thumbnail .ratings:nth-of-type(1) p').css('height', maxh);

var maxh = 0;
$('.thumbnail h4:nth-child(2)').each(function() {
  var h = $(this).height();
  if(h > maxh) maxh = h;
});
$('.thumbnail h4:nth-child(2)').css('height', maxh);

您可能想要为缩略图div设置固定高度。但这需要您将评级星号和绿色按钮设置为position: absolute; bottom: [amount]px;以使其正确对齐。我很确定这与bootstrap浮动和这些项目的响应行为不兼容。

Answer 2

您可以遍历每个.thumbnail项并找到最大高度，然后将min-height应用于与最大高度匹配的每个元素：

$(document).ready(function() {
    var maxHeight = 0;

    $('.thumbnail').each(function() {
        var height = $(this).height();

        if(height > maxHeight) {
            maxHeight = height;
        }
    });

    $('.thumbnail').css('min-height', maxHeight);
});

您可能需要使用setTimeout等延迟来确保在计算高度之前已加载所有内容。

Answer 3

您应该使用行或使用javascript / jquery为所有框设置相等的高度。 Bootstrap每行使用12个col，因此您可以将代码修改为每行4个项目。如果较大的设备col宽度相同，您也只需要最小的设备col宽度。在您的情况下，仅使用col-sm-3。

<div class="row">
    <div class="col-sm-3" ></div>
    <div class="col-sm-3" ></div>
    <div class="col-sm-3" ></div>
    <div class="col-sm-3" ></div>
</div>

Answer 4

给框设置一个高度，例如：

.box {
     height: 150px;
}

如何保持CSS块相等？

4 个答案: