Tab gets displayed in next line with visible class

Question

I have a simple 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>

As you can see the tabs with the tabselectors camera and qr_code both have a visible class.

Because of that the tabs are displayed in a new line.

How can I prevent this? Or how can I display them only on specific viewport-sizes?Thanks

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

Answer 1

You will have to use the visible-xs-inline that way it won't brake the line because I think it defaults to block. Here is the code using the inline.

Fiddle

Detailed information here : Bootstrap