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类并将其定义为给定的

.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应用于选项卡的填充量，并在我的checkbox-div中使用了相同的填充量。

Answer 2

您可以在此处应用特定的 css，其行高和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

您可以简单地在现有行类中添加样式，或者如果您不想打扰在元素中添加新类，例如

<div class="middle-row row">

css

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

如果需要，您也可以选择align-item：flex-end;

行中带有Bootstrap 3个标签的垂直对齐复选框

3 个答案: