Question

我正在尝试使用转发器从数据库中检索名称，图像路径等产品信息，并使用后面的代码在数据视图中显示。我可以成功检索并显示细节，但div的对齐不正确。

aspx代码：

<div class="row">
                <asp:Repeater ID="Repeater2" runat="server"></asp:Repeater>
                <asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                        <div class="col-sm-4 col-lg-4 col-md-4">
                            <div class="thumbnail">
                                <img width="250px" height="300px" src="images/<%#Eval("ImagePath") %>" alt="<%#Eval("ProductName") %>">
                                <div class="caption">
                                    <h4><%#Eval("ProductName") %></h4>
                                    <h4><%#Eval("UnitPrice")%></h4>
                                </div>
                                <div class="clearfix">
                                </div>
                            </div>                                
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>

代码背后的代码：

SqlDataAdapter sda = new SqlDataAdapter("SELECT ProductName, UnitPrice, ImagePath FROM Products", con);
        DataTable dt = new DataTable();
        sda.Fill(dt);

        DataView dv = new DataView(dt);
        dv.Sort = "ProductName"; // Sort by product name
        Repeater1.DataSource = dv;
        Repeater1.DataBind();

当前输出： screenshot 预期产量：根据引导网格视图概念，第四个图像应该位于第一个图像下方，这在我的情况下不会发生，因此整个布局会发生变化。

我是初学者，刚刚开始学习bootstrap。

Answer 1

有两种方法可以解决此问题： 1）在3列之后结束行，并为接下来的3列开始第2行。 2）为列添加相等的高度。您可以使用以下脚本并添加＆＃39; resize-height＆＃39;每列的课程。

function setHeight(column) {

        var maxHeight = 0;
        //Get all the element with class = col
        column = jQuery(column);
        column.css('height', 'auto');
        //Loop all the column
        column.each(function () {
            //Store the highest value
            if (jQuery(this).height() > maxHeight) {
                maxHeight = jQuery(this).height();
            }
        });
        //Set the height
        column.height(maxHeight);

}

jQuery(window).on('load resize', function () {
    setHeight('.resize-height');
});

动态创建div时，引导网格未正确对齐

1 个答案: