分割两个垂直对齐列左和右与Bootstrap

Question

我想让左列与左对齐，右列与右对齐，同时保持垂直对齐。我已经看到了关于这个的几个问题，我可以得到这个工作，如果我不包括"coli -sm-6"，因为这些项目是浮动的，它给我的问题，我正在寻找一个工作，但坚持引导布局。

<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来实现它，并保持引导框架。

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;
    }
}

摆弄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;
}