用 Bootstrap 左右拆分两个垂直对齐的列

Question

我想将左列向左对齐，将右列向右对齐，同时保持它们垂直对齐。我已经看到了几个关于这个的问题，如果我不包括 "col-sm-6" 我可以让它工作，因为这些项目是浮动的，它给我带来了问题，我正在寻找解决方法但坚持使用 Bootstrap布局。

<header>
    <div class="container">
        <div style="display:table-row;" class="row">
            <div style="display:table-cell; vertical-align:middle; text-align:left;" class="col-sm-6">
                Left Column Text
            </div>
            <div style="display:table-cell; vertical-align:middle; text-align:right;" class="col-sm-6">
                <div class="list">
                    <ul>
                        <li>List Item 1</li>
                        <li>List Item 2</li>
                        <li>List Item 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

问题得到解答，以下方法有效，但这里还有另一个现成的解决方案：http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height

Answer 1

给你，你可以使用 flex 和 align-items:center 并保持 bootstrap 框架来实现它。

HTML

<div class="container">
    <div class="row sm-flex-center">
        <div class="col-sm-6">
            Left Column Text
        </div>
        <div class="col-sm-6 pull-right">
            <div class="list">
                <ul>
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .lg-flex-center {
        display:flex;
        align-items:center;
    }
}

Fiddle With Flex

如果不是像我这样的 flex 的忠实粉丝，请使用 table

HTML

<div class="container">
    <div class="row table-center">
        <div class="col-md-6 col-sm-6 middle">
            Left Column Text
        </div>
        <div class="col-md-6 col-sm-6 middle pull-right">
            <div class="list">
                <ul>
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.table-center {
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
}
.middle {
      display: table-cell;
      vertical-align: middle;
      float:none;
}

Fiddle With Table

用 Bootstrap 左右拆分两个垂直对齐的列

Split two vertically aligned columns left and right with Bootstrap

html

css

twitter-bootstrap