Question

我在一行中有两个Bootstrap列，因此：

<div class="row">
    <div class="col-xs-6 mainBox">
        <h1>Heading</h1>
        <h2>Sub Heading</h2>
    </div>
    <div class="col-xs-6 mainBox buttonBox">
        <button class="btn btn-primary">Button</button>
    </div>
</div>

我希望第二列在行内垂直对齐。我如何实现这一目标？

这是一个演示小提琴：
http://jsfiddle.net/RationalGeek/6pYhx/

Answer 1

尝试使用position: absolute;并设置bottom 0：

.row {
    position: relative;
}
.mainBox {
    border: solid thin black;
}    
.buttonBox {
    position: absolute;
    bottom:0;
    right:0;
}

http://jsfiddle.net/6pYhx/3/

Answer 2

虽然绝对位置是一个快速解决方案，但是对于许多列工作的更强大的解决方案会更好。

以下是此updated fiddle中的解决方案。

[class*='cols-'].row > *{
  float: none;
  position: relative;
  display: inline-block; 
  /* old ie fixes */
  *zoom: 1; 
  *display: inline;
}

.row.cols-bottom > *{
  vertical-align: bottom;
}

.row.cols-middle > *{
  vertical-align: middle;
}

和html：

<div class="row cols-bottom">
    <div class="col-xs-4">
        <h3>Heading</h3>
        <h4>Sub Heading</h4>
    <!-- The lack of space between div tags below does MATTER -->
    </div><div class="col-xs-4">
        <button class="btn btn-primary">Button </button>
    <!-- The lack of space between div tags below does MATTER -->
    </div><div class='col-xs-4'>
        This col should be 3
    </div>
</div>

我的解决方案中有几点需要注意。使用的内联块策略允许将div列定位以保留在文档的流中，同时还允许使用垂直对齐样式。我为你提供了底部对齐和中间对齐的样式（我倾向于经常使用中间对齐）。

要注意的第二件事是必须让相应的结尾列</div>和起始列<div>与否相遇两者之间的空间。这是因为内联块为任何字符（包括空格字符）提供“空间”。本质上，这是因为空格字符具有给定的字体大小，最终会推动最左侧列下方的相应最右侧列。有一些黑客可以克服这个问题，但它们 note 跨浏览器兼容，所以我没有包含它们。因此，我的解决方案是无黑客的，并且可以使用多个列。享受！

Answer 3

基于迈克的解决方案，这里不关心div之间的空格。它不使用内联，而是使用display：table和display：cell。

[class*='cols-'] {
   display:table;
}
[class*='cols-'] > * {
    float: none;
    position: relative;
    /* old ie fixes */
    *zoom: 1; 
    *display: inline;
    display: table-cell;
}
.cols-bottom > * {
        vertical-align: bottom;
}
.cols-top > * {
        vertical-align: top;
}

//extra bonus if needed
.p-top {
    vertical-align: top;
}

plunker已更新：http://jsfiddle.net/6pYhx/325/

Answer 4

基于Mike和JPH的解决方案，这允许保留col-12行为。它在纯CSS中并不完美，有点冗长，但有效。

/* Vertical Align Columns */
[class*='cols-'] {
   display:table;
}
.cols-bottom > * {
    vertical-align: bottom;
}
.cols-middle > * {
    vertical-align: middle;
}
.cols-top > * {
    vertical-align: top;
}

/* Resets for col-12 classes */
@media (min-width: 1200px) {
    [class*='cols-'] > *:not(.col-lg-12) {
        float: none;
        position: relative;
        /* old ie fixes */
        *zoom: 1; 
        *display: inline;
        display: table-cell;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    [class*='cols-'] > *:not(.col-lg-12):not(.col-md-12) {
        float: none;
        position: relative;
        /* old ie fixes */
        *zoom: 1; 
        *display: inline;
        display: table-cell;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    [class*='cols-'] > *:not(.col-lg-12):not(.col-md-12):not(.col-sm-12) {
        float: none;
        position: relative;
        /* old ie fixes */
        *zoom: 1; 
        *display: inline;
        display: table-cell;
    }
}
@media (max-width: 767px) {
    [class*='cols-'] > *:not(.col-lg-12):not(.col-md-12):not(.col-sm-12):not(.col-xs-12) {
        float: none;
        position: relative;
        /* old ie fixes */
        *zoom: 1; 
        *display: inline;
        display: table-cell;
    }
}

Answer 5

我知道我在非常旧帖子上发帖，但我一直在寻找同一问题的解决方案。我认为一个简单的解决方案可能是在行上使用display: flex;，在您要推送的列上使用margin-top: auto;。这是基于OP的demo fiddle。

*请注意* - 这会改变可能会产生意外副作用的row类。您可能希望在新类中实现它，并仅在需要时应用。

Answer 6

这是另一个工作示例
http://jsfiddle.net/RationalGeek/6pYhx/

<div class="row row-eq-height"></div>

Css：

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}
.mainBox {
   border: solid thin black;
}

.buttonBox {
    vertical-align:center;
    margin-top: auto;
   margin-bottom: auto;
}

Bootstrap 3 - 行内的底部对齐列

6 个答案: