垂直对齐复选框与行中的 Bootstrap 3 选项卡
Posted
技术标签:
【中文标题】垂直对齐复选框与行中的 Bootstrap 3 选项卡【英文标题】：Vertical align Checkbox with Bootstrap 3 Tabs in row 【发布时间】：2019-08-23 13:05:24 【问题描述】：我在此处进行了此设置，其中有几个选项卡，右侧是一个复选框。 我希望复选框与标签标签一起在中心垂直对齐。
<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 不是一个选项。
【问题讨论】：
应该怎么来？ 复选框应与选项卡中和屏幕右侧的文本对齐。 【参考方案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 上使用了相同的填充。
【讨论】：
别担心！永远不要忘记，Bootstrap 本身只是 CSS 规则和 javascript 函数的大集合，所以理论上你永远需要 Bootstrap，有时没有它甚至会更容易。【参考方案2】：您可以在此处应用具有 line-height 和 vertical-align:middle 的特定 css；
.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>【讨论】：
【参考方案3】：您可以简单地在现有的行类中添加样式，或者如果您不想打扰在元素中添加新类，如下所示
<div class="middle-row row">
css
.middle-row
display: flex;
align-items: center;
如果你愿意，你也可以选择 align-items: flex-end;
【讨论】：
他的最后一条通道明确指出“不幸的是，Flexbox 不是一个选项。”以上是关于垂直对齐复选框与行中的 Bootstrap 3 选项卡的主要内容，如果未能解决你的问题，请参考以下文章