css - 带有多行标签的 Bootstrap 标签 - 如何使它们自下而上堆叠

Question

显然，当有超过 1 行选项卡时，默认行为是 Bootstrap 选项卡像上图一样堆叠。我希望“完整”的选项卡行始终位于内容框的顶部(看起来更自然)，而不是部分填充的行。任何人都知道如何实现这一目标？请注意，行内的 Tab 键顺序应保持不变，只是行顺序发生了变化。非常感谢您的帮助，谢谢。

Answer 1

我最近一直在研究这个问题，并提出了一个使用 flexbox 的潜在(部分)修复(注意，BS4 已经将 flexbox 用于选项卡，尽管它仍然表现出与上面所示相同的包装问题):

/* for demo purposes only */
.demo {
  margin: 2em;
  max-width: 300px;
}

.tab-content {
  margin-top: 1em;
}

/* tab reordering fix - older browsers may require other prefixed rules */
.nav.nav-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="demo">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">[HOME TAB CONTENT]</div>
    <div role="tabpanel" class="tab-pane" id="profile">[PROFILE TAB CONTENT]</div>
    <div role="tabpanel" class="tab-pane" id="messages">[MESSAGES TAB CONTENT]</div>
    <div role="tabpanel" class="tab-pane" id="settings">[SETTINGS TAB CONTENT]</div>
  </div>

</div>

我仍在研究的一个剩余问题是，如果选项卡被选中，如何自动将其移动到底行(在此处给出的示例中，单击“设置”有效，但现在看起来已从选项卡主体中删除)。

我找到了一个小的解决方法(基本上，如果点击选项卡的 top 位置高于当前事件选项卡的 top 位置，交换 flex-wrap 到 wrap 而不是 wrap-reverse)，但感觉很不稳定!如果我对它进行排序，我会尽量记得更新这篇文章:)