CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
John Smith
John Smith

Reputation: 6259

Tab gets displayed in next line with visible class

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.

enter image description here

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

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

Upvotes: 3

Views: 63

Answers (3)

Gregorie
Gregorie

Reputation: 129

To show class only in mobile version you ca use responsive css:

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

But better creat you own class to prevent overriding of visible-xs. hope, I understand you correctly.

Upvotes: 0

nestedl00p
nestedl00p

Reputation: 490

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

Upvotes: 2

Erkan Demirel
Erkan Demirel

Reputation: 4382

Because of li elements have display:inline-block. But if you just use visible-xs it will use display:block !important. Therefore they will get all row you should use 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>

You can check code here http://jsfiddle.net/52VtD/13429/

Detail information

Upvotes: 1

Related Questions