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

Question

我有一个简单的标签菜单，其中还包含输入控件。

<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

Answer 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>

Answer 2

如果您不想设置固定的高度，则可以同时设置ul和li的柔韧性（在下面的nav-tabs ul中添加一个flex-tabs类）：

@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>

Answer 3

这是经过更新的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;
}