Question

我有一个简单的bootstrap breadcrumb：

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

正如您所看到的，带有tabselectors camera和qr_code的标签都有可见的类。

因此，标签以新行显示。

我该怎样防止这种情况？或者我如何仅在特定的视口尺寸上显示它们？谢谢

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

Answer 1

你必须以visible-xs-inline方式使用它不会制动线路，因为我认为它默认为阻止。以下是使用内联的代码。

Fiddle

此处的详细信息：Bootstrap

Answer 2

由于li元素有display：inline-block。但是如果你只使用visible-xs，它将使用display：block！important。因此，他们将获得您应该使用的所有行visible-xs-inline-block。

    <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-inline-block tabselector">
        <a href="#" >QR-Code</a>
      </li>
      <!-- Wird nur bei mobile gezeigt -->
      <li data-tabselector="camera" class="visible-xs-inline-block tabselector">
        <a href="#" >Kamera</a>
      </li>
    </ul>

您可以在此处查看代码http://jsfiddle.net/52VtD/13429/

Detail information

Answer 3

要仅在移动版本中显示课程，您可以使用响应式css：

.visible-xs{
 display: none;
}
@media screen and (max-width: 480px){
 .visible-xs{
  display: inline-block;
 }
}

但更好的创建你自己的类来防止覆盖可见xs。希望，我理解正确。

Tab显示在下一行，显示可见类

3 个答案: