Question

我正在使用bootstrap row / col类。当列的内容很少时，它看起来很好：

...但如果他们有更多的内容（如下面的屏幕截图中的“交付表现”），第1栏中的最后一个元素（“2016年3月29日至2016年4月5日”）包含在哪里第2栏应该是：

我希望“交付绩效”（我动态添加的所有链接）之间的所有内容都保持在“交付绩效”h2之下，并且永远不会移动到下一列。我需要做些什么才能实现这一目标？

这是我正在做的事情（它是相同的代码 - 除了列名称/类型特定部分 - 对于所有列）：

StringBuilder builder = new StringBuilder();
builder.Append("<div class=\"col-md-3\">"); // <= begin col div
builder.Append("<h2>Delivery Performance</h2>");
builder.Append("<p></p>");

// Create links for each report
foreach (String fileBaseName in _FileBaseNameList)
{
    startDateYYYYMMDD = GetElement(3, fileBaseName);
    endDateYYYYMMDD = GetElement(4, fileBaseName);
    builder.Append("<p></p>");
    builder.Append(string.Format("<a 
        href=\"deliveryperformance/{0}/{1}/{2}\">{3}</a>", unit,  
        startDateYYYYMMDD,
        endDateYYYYMMDD, fileBaseName));                                                        
    builder.Append("</div>"); // <= end "col-md-3" div
    builder.Append("<p></p>");
}
return builder.ToString();

我是否需要在“column”div中添加另一个类来将高度设置为max或gazillion，或者是什么？

Answer 1

将结束div移到for循环之外。

StringBuilder builder = new StringBuilder();
builder.Append("<div class=\"col-md-3\">"); // <= begin col div
builder.Append("<h2>Delivery Performance</h2>");
builder.Append("<p></p>");

// Create links for each report
foreach (String fileBaseName in _FileBaseNameList)
{
    startDateYYYYMMDD = GetElement(3, fileBaseName);
    endDateYYYYMMDD = GetElement(4, fileBaseName);
    builder.Append("<p></p>");
    builder.Append(string.Format("<a 
        href=\"deliveryperformance/{0}/{1}/{2}\">{3}</a>", unit,  
        startDateYYYYMMDD,
        endDateYYYYMMDD, fileBaseName));                                                        
    builder.Append("<p></p>");
}
builder.Append("</div>"); // <= end "col-md-3" div
return builder.ToString();

如果空段落标签用于样式，我建议使用css为元素添加填充或边距以代替间距。虽然如果你要列出多个报告，这里的无序列表会很棒。

如何让我的bootstrap列无限延长（没有高度限制）？

1 个答案: