基于Bootstrap的垂直选项卡：对齐问题

Question

使用 Twitter Bootstrap 3.2.0和一个非常好的 snippet ，我创建了一个包含多个选项的菜单框。 对于每个菜单项，都有标签和简短描述，如下图所示：

您可以在 JSfiddle 上找到代码示例。

现在，我想：

1. 在中间对齐菜单项内容（关于垂直对齐）;

2. 对齐右下方的提交按钮。

有人可以建议我怎么做吗？

Answer 1

<强> 1。在中间对齐菜单项内容（关于垂直对齐）：

我最近使用@ beaver82minimit这个优秀的教程，允许创建相同高度的列引导样式：http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

你可以像这样使用它：

<div class="container container-xs-height">
    <div class="row row-xs-height">
        <div class="col-xs-6 col-xs-height"></div>
        <div class="col-xs-3 col-xs-height col-top"></div>
        <div class="col-xs-2 col-xs-height col-middle"></div>
        <div class="col-xs-1 col-xs-height col-bottom"></div>
    </div>
</div>

使用课程col-middle，您可以垂直居中。

<强> 2。对齐右下方的提交按钮

a）将类bottom-right添加到按钮并删除包装<p>

<button type="button" class="btn btn-primary btn bottom-right" style="margin: 20px 0 0 0;"><span class="glyphicon glyphicon-log-in"></span> Submit</button>

b）将其添加到样式表中：

.bottom-right {
    position: absolute;
    right: 0;
    bottom: 0;
}

要防止标签内容与按钮重叠，请将padding-bottom添加到标签内容div：

div.bhoechie-tab-content{
  background-color: #ffffff;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 54px;
}

以下是演示：http://jsfiddle.net/LaBZP/3/

列表组项目垂直对齐中间：

.text-center {
    display: table;
    width: 100%;
}
.text-center > div {
    display: table-cell;
    vertical-align: middle;
}

将 list-group-item 下的div添加到标记：

<a href="#" class="list-group-item idp-group-item text-center">
  <div>
    <strong>Label B</strong><br/>Label B Desc
  </div>
</a>

演示：http://jsfiddle.net/LaBZP/4/