Wie kann ich meine Bootstrap-Spalte unbegrenzt erweitern (keine Höhenbeschränkung)?

Question

Ich benutze die Bootstrap Zeilen-/Spaltenklassen. Es sieht gut aus, wenn die Spalten haben sehr wenig Inhalt:

... aber wenn sie ein wenig mehr Inhalt (als „Delivery Performance“ hat in der Abbildung unten), das letzte Element haben ("March 29, 2016 bis 5. April 2016") in Spalte 1 Wraps bis zu dem col 2 sein sollte:

ich will alles zwischen "Delivery Performance" (alle Links dynamisch hinzufügen) I unten bleiben die "Delivery Performance" h2, und nie in die nächste Spalte wechseln. Was muss ich tun, um das zu erreichen? Hier

ist, was ich tue (es ist der gleiche Code - mit Ausnahme der Spaltenname/typspezifischen Teile - für alle Spalten):

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(); 

Muss ich eine andere Klasse in die „Spalte“ hinzufügen div, um die Höhe auf maximal oder einen Gazillion einzustellen, oder was?

Answer 1

Verschieben Sie das schließende Div außerhalb Ihrer for-Schleife.

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(); 

Wenn die leeren Absatz-Tags für das Styling sind würde ich empfehlen, mit CSS padding oder Margen für Abstand anstatt auf Ihre Elemente hinzuzufügen. Wenn Sie jedoch mehrere Berichte auflisten, wäre eine ungeordnete Liste hier großartig.