Question

如何将自定义按钮组的标签与浮动垂直对齐？

if

我试了<div class="col-md-12"> <div class="btn-group pull-right" role="group" aria-label="Sort By"> <button class="btn btn-default btn-sm">Friends</button> <button class="btn btn-default btn-sm">Distance</button> </div> <div class="pull-right"> <div>Sort By:</div> </div> </div>没有运气

JSFiddle

Answer 1

您可以使用line-height完成此操作。

.btn-group + .pull-right div {
    line-height:2em;
}

Answer 2

试试这个：

<div class="container">
  <div class="row">
    <div class="col-md-12 pull-right">
      <span class="label label-default">Sort By:</span>
      <div class="btn-group" role="group" aria-label="Sort By">
        <button class="btn btn-default btn-sm">Friends</button>
        <button class="btn btn-default btn-sm">Distance</button> 
      </div>
    </div>
  </div>
</div>

Answer 3

您可以使用课程将position: relative和top: 5px垂直居中。

HTML：

<div class="sort-by">Sort By:</div>

CSS：

.sort-by{
  position: relative;
  top: 5px;
}

以下是更新后的小提琴：http://jsfiddle.net/syy8pe7n/2/

问候！

Bootstrap 3垂直对齐btn-group的文本

3 个答案: