Apply the following css:
.column, .columns{
min-height: 1px;
}
Frage
Using Foundation, I sometimes have an empty column in a row, and that column gets collapsed entirely, engendering a mismatch between column data and column headers. Is there a way that I can prevent this collapse, making even empty columns get full width? (Is there a way besides inserting non-breaking spaces or other text into the otherwise empty columns?)
<div class="row">
<div class="small-1 columns">Bruce</div>
<div class="small-1 columns"></div> <!-- this gets collapsed to 0 width! -->
<div class="small-1 columns">Dickinson</div>
</div>
Lösung
Apply the following css:
.column, .columns{
min-height: 1px;
}
Andere Tipps
You could add some pseudo content to the containing element to trigger rendering.
Markup:
<div class="row">
<div class="column">
<p class="middlename"></p>
</div>
</div>
CSS:
.middlename:before {
content: "\00a0";
font-size: 0;
}
You can tag the last column (you are using) with "end".
<div class="row">
<div class="medium-3 columns">3</div>
<div class="medium-3 columns">3</div>
<div class="medium-3 columns end">3 end</div>
</div>