html - 选项卡显示在具有可见类的下一行

Question

我有一个简单的 Bootstrap 面包屑:

    <ul class="breadcrumb" id="tree_form_selector">
      <li data-tabselector="allgemeine_angaben" class="active tabselector" >
        Allgemeine Angaben
      </li>
      <li data-tabselector="pflegezustand" class="tabselector">
        <a href="#" >Pflegezustand</a>
      </li>
      <li data-tabselector="blüte_und_ertrag" class="tabselector">
        <a href="#" >Blüte und Ertrag</a>
      </li>
      <!-- Wird nur bei computernn/nicht bei mobile gezeigt -->
      <li data-tabselector="qr_code" class="visible-md tabselector">
        <a href="#" >QR-Code</a>
      </li>
      <!-- Wird nur bei mobile gezeigt -->
      <li data-tabselector="camera" class="visible-xs tabselector">
        <a href="#" >Kamera</a>
      </li>
    </ul>

如您所见，带有选项卡选择器 camera 和 qr_code 的选项卡都有一个 visible 类。

因此，选项卡显示在新行中。

我该如何防止这种情况发生？或者我如何才能仅在特定视口(viewport)尺寸上显示它们？谢谢

http://jsfiddle.net/52VtD/13428/

Answer 1

您将不得不使用 visible-xs-inline 这样它就不会中断线路，因为我认为它默认为阻塞。这是使用内联的代码。

Fiddle

详细信息在这里:Bootstrap