Question

问题背景：

我在我的视图中使用Bootstrap显示多个Panel的高度相同。

问题：

面板可以有不同的高度，具体取决于图像大小，标题大小等。据我所知，Bootstrap中没有任何内容可以自动调整面板的大小相同的大小。

我已经实现了jQuery来调整Panel的大小，使其具有相同的高度。

主要问题是有时调整大小的Panels内容会溢出。通常刷新页面然后纠正问题。

屏幕截图显示内容溢出Panel的问题，如黑色箭头所示：

刷新后问题得到纠正，如绿色箭头所示：

守则：

          @foreach (var item in @Model.DisplayItems)
            {
                <div class="col-lg-4">
                    <div class="panel panel-default">
                        <div class="panel-heading textOverflow" id="panelHeading">
                            <h3 class="panel-title text-center"><b>@item.Title</b></h3>
                        </div>
                        <div class="panel-body">
                            <a href="@item.url"><img src="@item.Image" class="picHeight img-rounded img-responsive center-block" /></a>
                            <h4 class="text-center"><b>@item.Price</b></h4>
                            <h4 class="text-center"><a href="@item.url" class="btn btn-success">See More</a></h4>
                            <div class="text-center"><img class="originPic" src="@Url.Content("~/Images/"+item.img)" /></div>
                        </div>
                    </div>
                </div>
            }
        </div>

<script type="text/javascript">
$(document).ready(function () {
    var heights = $(".panel").map(function () {
        return $(this).height();
    }).get(),

      maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

<style>
.textOverflow {
    text-overflow: ellipsis;
}

.picHeight {
    max-height: 105px;
}

.topOffSet {
    margin-top: 20px;
}

.originPic {
    height: 50px;
    width: 50px;
}

Answer 1

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Data; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { DataTable dt = new DataTable(); dt.Columns.Add("Username", typeof(string)); dt.Columns.Add("Logdate", typeof(DateTime)); dt.Columns.Add("Sale", typeof(decimal)); dt.Rows.Add(new object[] { "Test", DateTime.Parse("12/03/2015"), 4.5 }); dt.Rows.Add(new object[] { "Test", DateTime.Parse("12/13/2015"), 15 }); dt.Rows.Add(new object[] { "Test2", DateTime.Parse("12/18/2015"), 3 }); dt.Rows.Add(new object[] { "Test2", DateTime.Parse("12/25/2015"), 40 }); Dictionary<string, List<DataRow>> dict = dt.AsEnumerable() .GroupBy(x => x.Field<string>("UserName"), y => y) .ToDictionary(x => x.Key, y => y.ToList()); foreach (string key in dict.Keys) { List<int> days = dict[key].Select(x => x.Field<DateTime>("Logdate").Day).OrderBy(x => x).ToList(); int month = dict[key].Select(x => x.Field<DateTime>("Logdate").Month).FirstOrDefault(); int year = dict[key].Select(x => x.Field<DateTime>("Logdate").Year).FirstOrDefault(); int lastDay = (new DateTime(year, month, 1)).AddMonths(1).AddDays(-1).Day; for (int day = 1; day <= lastDay; day++) { if(!days.Contains(day)) { dt.Rows.Add(new object[] { key, new DateTime(year, month, day), 0 }); } } } } } } 通常是正确的事情，但在这种情况下，它不是，至少没有修改。

当页面的 DOM 准备就绪时，就会触发就绪事件。像图像之类的东西可能还没有被提取。鉴于您的面板的高度取决于其中的图像，如果这些图像在DOM准备好时未加载（因为它们将具有未知/零高度），这将导致不正确的计算。重新加载修复它，因为图像现在在缓存中。

您有几个选择：

改为在$(document).ready()中调整大小。
将$(window).load()添加到图片中以明确设置其高度。
使用height="xxx"定期调整面板大小。

Answer 2

由于最近加载的图片，您有时会遇到此类问题。我已将$(document).ready更改为$(window).load

你的代码应该是。

$(window).load(function () {
    var heights = $(".panel").map(function () {
        return $(this).height();
    }).get(),

      maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

jQuery并不总是正确调整Bootstrap面板的大小

2 个答案: