垂直对齐复选框，行中有 Bootstrap 3 个选项卡

Question

我这里有这个设置，我有几个选项卡，右边是一个复选框。
我希望复选框与选项卡标签在中心垂直对齐。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<br>
<br>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <ul class="nav nav-tabs" role="tablist">
        <li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
        <li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#)">Tab2</a></li>
        <li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
      </ul>
    </div>
    <div class="col-sm-6 pull-right">
      <span><input id="cb_D" type="checkbox" onclick="/* do things */"><label for="cb_D">CB</label></span>
    </div>
  </div>
</div>

我已经看到 this answer 但添加了 vcenter class 并将其定义为给定的

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

对我没有用，也没有将这些样式分配给 div 列本身。我也尝试过 display: table 和 table-cell 以及 vertical-align: middle，但这也不起作用。

不幸的是，Flexbox 不是一个选项。

Answer 1

我添加了一些基本的 CSS。这是你要求的吗？

.nav {
  float: left;
}

#checkbox {
  float: right;
  padding: 10px 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<br>
<div class="container">
  <ul class="nav nav-tabs" role="tablist">
    <li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
    <li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#">Tab2</a></li>
    <li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
  </ul>
  <div id="checkbox">
    <input id="cb_D" type="checkbox" onclick="/* do things */">
    <label for="cb_D">CB</label>
  </div>
</div>

我将导航向左浮动，将复选框向右浮动，使它们并排显示。我还查看了多少填充 Bootstrap 适用于选项卡并在我的复选框上使用了相同的 - div.

Answer 2

在这里你可以应用特定的 css with line-height 和 vertical-align:middle;

.customvcent,.customvcent *{
  line-height:42px;
  vertical-align:middle;
}

.customvcent input[type=checkbox]{
  margin:0px;
}

.customvcent label{
  margin-bottom:0px;
}

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <br/>
  <br/>
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-xs-8">
        <ul class="nav nav-tabs" role="tablist">
          <li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
          <li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#)">Tab2</a></li>
          <li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
        </ul>
      </div>
      <div class="col-sm-6 col-xs-4">
        <span class="customvcent pull-right"><input id="cb_D" type="checkbox" onclick="/* do things */"><label for="cb_D">CB</label></span>
      </div>
    </div>
  </div>
</body>
</html>

Answer 3

您可以简单地在现有行 class 中添加样式，或者如果您不想打扰添加新的 class 元素，如下所示

<div class="middle-row row">

css

.middle-row  {
    display: flex;
    align-items: center;
}

如果你愿意，你也可以prefer align-items: flex-end;

垂直对齐复选框，行中有 Bootstrap 3 个选项卡

Vertical align Checkbox with Bootstrap 3 Tabs in row

html

css

vertical-alignment

twitter-bootstrap-3