如何垂直填充一行? [英] How to vertically fill a row?

问题描述

是否可以在没有特定行或列高度的情况下使列垂直填充行内的剩余空间和/或垂直居中?

<div class="row"><div class="col-sm-6">This<br/>Column<br/>Has<br/>Many<br/>Lines<br/>...<br/>...<br/>...<br/>...</div><div class="col-sm-6 blueBackground">这应该居中和/或填充背景蓝色一直到第一列的最后一行</div>

解决方案

你可以给网格系统 css table 属性，像这样:

HTML

<div class="row row-same-height"><div class="col-sm-6 col-sm-height">This<br>Column<br>Has<br>Many<br>Lines<br>...<br>...<;br>...<br>...</div><div class="col-sm-6 col-sm-height blueBackground">这应该居中和/或填充背景蓝色一直到第一列的最后一行</div>

CSS

.blueBackground {背景颜色:蓝色；}.col-sm-高度{显示:表格单元格；浮动:无！重要；}.row-same-height {显示:表；宽度:100%；}

工作示例

您可以在此处阅读更多相关信息，并查看如何使用 media-queries 使其响应的示例:引导 3 个相同高度的响应列

Is it possible to make columns vertically fill the remaining space within a row and/or vertically center without a specific row or column height?

<div class="fluid-container">
    <div class="row">
        <div class="col-sm-6">This<br />Column<br />Has<br />Many<br />Lines<br />...<br />...<br />...<br />...</div>
        <div class="col-sm-6 blueBackground">This be should centered and/or fill the background blue all the way to the last line of the first column</div>
    </div>
</div>

解决方案

You can give the grid system the css table properties, like this:

HTML

<div class="fluid-container">
    <div class="row row-same-height">
        <div class="col-sm-6 col-sm-height">This<br>Column<br>Has<br>Many<br>Lines<br>...<br>...<br>...<br>...</div>
        <div class="col-sm-6 col-sm-height blueBackground">This be should centered and/or fill the background blue all the way to the last line of the first column</div>
    </div>
</div>

CSS

.blueBackground {
    background-color: blue;
  }
  .col-sm-height {
        display: table-cell;
        float: none !important;
    }
  .row-same-height {
    display: table;
    width: 100%;
}

Working Example

You can read about it more here, and see examples how you can make it responsive with media-queries: Bootstrap 3 responsive columns of same height

这篇关于如何垂直填充一行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！