如何为引导选项卡设置相同的高度？答案

【问题标题】：How to set same heights for bootstrap tabs?如何为引导选项卡设置相同的高度？
【发布时间】：2020-01-15 02:29:27
【问题描述】：

我有一个简单的选项卡菜单，其中还包含输入控件。

<ul class="nav nav-tabs">
    <li role="presentation" class="">
        <a>tab4</a>
    </li>
    <li role="presentation" class="active">
        <a><input value="tab5"/></a>
    </li>
</ul>

添加输入后，现在选项卡的样式有些不一致。如何为标签设置相同的高度？

这里是 jsfiddle：jsfiddle

【问题讨论】：

你能建一个jsfiddle吗？
它们在您的 jsfiddle 中具有相同的高度。你想完成什么？
@EdisonBiba，尝试将鼠标悬停在 tab4 上，你会看到不一致的地方。然后你可以将 tab4 标记为活动的。
用你的小提琴演奏我会添加这个 border:none;padding:0; 到输入和工作。因此，我认为与您的输入有关的问题将改变 li 的高度。尝试为 li 元素设置一个固定的高度
@Sfili_81，是的，它有效。请将其添加为答案以便投票。

标签： html css twitter-bootstrap-3

【解决方案1】：

要解决此问题，您可以使用input height。

.nav li.active input {
  height: 20px;
}

body {
  padding: 20px;
}


/* Choose max-size of panel */

.panel--sections {
  max-width: 800px;
}


/* Give some top and bottom padding for the columns */

.col-sm-6 {
  padding-top: 15px;
  padding-bottom: 15px;
}


/* Give col-left a border at bottom if on mobile */

.col-left {
  border-bottom: 1px solid #dddddd;
}

@media (min-width: 768px) {
  /* Give col-left a border on right if on bigger screen */
  .col-left {
    border-right: 1px solid #dddddd;
    border-bottom: 0;
  }
}

.nav li.active input {
  height: 20px;
}

<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" />

<ul class="nav nav-tabs">
  <li role="presentation" class="">
    <a>tab4</a>
  </li>
  <li role="presentation" class="active">
    <a><input value="tab5" /></a>
  </li>
</ul>

【讨论】：

这会在用户更改选项卡时出现问题，因为输入高度会改变。
我没有检查那个场景，但你是对的，这也可以用 line-height 来完成。
你只需要在你的选择器中删除 .active 类 :)

【解决方案2】：

这是更新后的jsfiddle 和工作示例

这里的问题是因为输入有边框，它增加了输入标签的高度。

您可以将其他选项卡的高度设置为大于输入。

.nav li > a {
    line-height: 26px
}

.nav li > a input{
    line-height: 20px
}

因此，根据您的输入高度，您只需向其他选项卡添加 6 个像素

您也可以使用 flex 动态执行此操作，因此将 flex 赋予选项卡会起作用，但您需要检查如何与其他组件一起使用。

.nav.nav-tabs, .nav.nav-tabs > li{
    display: flex;
}

【讨论】：

【解决方案3】：

如果你不想设置固定高度，你可以让你的 ul 和 li 都 flex （下面添加一个 flex-tabs 类到 nav-tabs ul）：

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

body {
  padding: 20px;
}

/* Choose max-size of panel */
.panel--sections {
  max-width: 800px;
}

/* Give some top and bottom padding for the columns */
.col-sm-6 {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* Give col-left a border at bottom if on mobile */
.col-left {
  border-bottom: 1px solid #dddddd;

}

@media (min-width: 768px) {

  /* Give col-left a border on right if on bigger screen */
  .col-left {
    border-right: 1px solid #dddddd;
    border-bottom: 0;
  }
}

.flex-tabs,
.flex-tabs li {
  display: flex;
}

<ul class="nav nav-tabs flex-tabs">
  <li role="presentation" class="">
    <a>tab4</a>
  </li>
  <li role="presentation" class="active">
    <a><input value="tab5" /></a>
  </li>
</ul>

【讨论】：