Question

我想将左列与左侧和右侧列对齐，同时保持它们垂直对齐。我已经看到了几个有关此问题的问题，如果我不包含＆＃34; col-sm-6＆＃34;我可以将其付诸实践。由于这些项目是浮动的，它给了我一些问题，我正在寻找一个解决方案，但坚持使用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来实现它并保留引导框架。

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左右分割两个垂直对齐的列

1 个答案: