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

Question

显然，当有超过1行选项卡时，Bootstrap选项卡的默认行为就像在顶部图像中一样堆叠。我喜欢＆＃34;完整＆＃34;一排标签总是在内容框顶部（看起来更自然）而不是部分填充的行。谁知道如何实现这一目标？请注意，行中的Tab键顺序应保持不变，只是更改了行顺序。非常感谢帮助，谢谢。

Answer 1

我最近一直在玩这个并且想出了一个使用flexbox的潜在（部分）修复（注意，BS4已经使用了flexbox for tabs，尽管它仍然表现出上面显示的相同包装问题）：

/* 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交换为{{ 1}}而不是wrap），但感觉像地狱一样！如果我对它进行排序，我会记得更新这篇文章：）