有没有办法修复导航选项卡的位置

Question

我遇到了导航选项卡的相对位置和底部边框的问题。可以在这个 GIF 中看到： http://imgur.com/a/xKUmp

我只想将 "Option X"（以及稍后出现的其他选项）固定在左下角位置。

/* Code moved to jsfiddle */

更新：我可以在https://jsfiddle.net/g9qs869r/2/

中模拟它

Answer 1

你的风格问题。您正在使顶行元素的高度大于其余元素。为了消除差异，您可以添加到所有选项卡：

.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
  border-bottom: 4px solid #FFF; // added border in order to keep element height
}

JSFiddle：https://jsfiddle.net/g9qs869r/3/

Answer 2

您需要向 li 属性添加一个特定的高度，如果您将此行放在您的 css 上，行为会根据您的需要改变

.nav-tabs > li{ height:40px;}