有几种方法可以做到:

使用 显示:表格单元; vertical-align:中间; 和容器的CSS 显示:表; 使用填充与媒体屏幕，以改变填充相对于屏幕大小。谷歌@media屏幕了解更多。 使用相对填充 也就是说，用%来指定填充

我真的发现以下代码使用Chrome，而不是其他浏览器，而不是当前选择的答案:

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

bootp链接

您可能需要修改高度(特别是在.v-center上)，并根据您的需要在div[class*='col-']上删除/更改div。

下面的代码适合我:

.vertical-align {
    display: flex;
    align-items: center;
}

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

我详细阐述了zessx的答案，以便在不同屏幕尺寸上混合不同的列大小时更容易使用。

如果你使用Sass，你可以把这个添加到你的scss文件中:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

它生成以下CSS(如果你不使用Sass，你可以直接在你的样式表中使用):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

现在你可以像这样在你的响应列上使用它:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

有几种方法可以做到:

使用 显示:表格单元; vertical-align:中间; 和容器的CSS 显示:表; 使用填充与媒体屏幕，以改变填充相对于屏幕大小。谷歌@media屏幕了解更多。 使用相对填充 也就是说，用%来指定填充