skip to Main Content

Here is the screenshot of my tabs menuenter image description here

But the tab menu items jumps to next line if it has more items

Code

<div class="row col-lg-12">
    <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
            <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
           ......
    </ul>
    <div class="tab-content">
      <!--Contents goes here -->
     </div>
  </div>

So how can i fits all memu items into a single line??

2

Answers


  1. What you are looking for is what we call a scrollable tabbed menu, which enables you to click the left/right arrow to navigate through multiple tabs. You will will need to use jQuery and CSS to achieve this. Here’s a perfect example for you. Hopefully it’s what you are after.

    http://www.codeply.com/go/bp/l2ChB4vYmC

    <div class="container">
      <div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
      <div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
      <div class="wrapper">
        <ul class="nav nav-tabs list" id="myTab">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#profile">Profile</a></li>
          <li><a href="#messages">Messages</a></li>
          <li><a href="#settings">Settings</a></li>
          <li><a href="#">Tab4</a></li>
          <li><a href="#">Tab5</a></li>
          <li><a href="#">Tab6</a></li>
          <li><a href="#">Tab7</a></li>
          <li><a href="#">Tab8</a></li>
          <li><a href="#">Tab9</a></li>
          <li><a href="#">Tab10</a></li>
          <li><a href="#">Tab11</a></li>
          <li><a href="#">Tab12</a></li>
          <li><a href="#">Tab13</a></li>
          <li><a href="#">Tab14</a></li>
          <li><a href="#">Tab15</a></li>
          <li><a href="#">Tab16</a></li>
          <li><a href="#">Tab17</a></li>
      </ul>
      </div>
    </div>
    
    .wrapper {
        position:relative;
        margin:0 auto;
        overflow:hidden;
        padding:5px;
        height:50px;
    }
    
    .list {
        position:absolute;
        left:0px;
        top:0px;
        min-width:3000px;
        margin-left:12px;
        margin-top:0px;
    }
    
    .list li{
        display:table-cell;
        position:relative;
        text-align:center;
        cursor:grab;
        cursor:-webkit-grab;
        color:#efefef;
        vertical-align:middle;
    }
    
    .scroller {
      text-align:center;
      cursor:pointer;
      display:none;
      padding:7px;
      padding-top:11px;
      white-space:no-wrap;
      vertical-align:middle;
      background-color:#fff;
    }
    
    .scroller-right{
      float:right;
    }
    
    .scroller-left {
      float:left;
    }
    
    
    var hidWidth;
    var scrollBarWidths = 40;
    
    var widthOfList = function(){
      var itemsWidth = 0;
      $('.list li').each(function(){
        var itemWidth = $(this).outerWidth();
        itemsWidth+=itemWidth;
      });
      return itemsWidth;
    };
    
    var widthOfHidden = function(){
      return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
    };
    
    var getLeftPosi = function(){
      return $('.list').position().left;
    };
    
    var reAdjust = function(){
      if (($('.wrapper').outerWidth()) < widthOfList()) {
        $('.scroller-right').show();
      }
      else {
        $('.scroller-right').hide();
      }
    
      if (getLeftPosi()<0) {
        $('.scroller-left').show();
      }
      else {
        $('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
        $('.scroller-left').hide();
      }
    }
    
    reAdjust();
    
    $(window).on('resize',function(e){  
        reAdjust();
    });
    
    $('.scroller-right').click(function() {
    
      $('.scroller-left').fadeIn('slow');
      $('.scroller-right').fadeOut('slow');
    
      $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
    
      });
    });
    
    $('.scroller-left').click(function() {
    
        $('.scroller-right').fadeIn('slow');
        $('.scroller-left').fadeOut('slow');
    
        $('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
    
        });
    });    
    
    Login or Signup to reply.
  2. You can extend it to number of columns you needs. It requires adding a less function.

    A less variable allows to set column width in grid.less file:

    @grid-columns:              12;
    

    Here is a code that i found useful to extend it to 18 columns:

    //
    // Grid system
    // --------------------------------------------------
    
    // Set the container width, and override it for fixed navbars in media queries
    .container {
      .container-fixed();
    }
    
    // mobile first defaults
    .row {
      .make-row();
    }
    
    // Common styles for small and large grid columns
    .col-xs-1,
    .col-xs-2,
    .col-xs-3,
    .col-xs-4,
    .col-xs-5,
    .col-xs-6,
    .col-xs-7,
    .col-xs-8,
    .col-xs-9,
    .col-xs-10,
    .col-xs-11,
    .col-xs-12,
    .col-xs-13,
    .col-xs-14,
    .col-xs-15,
    .col-xs-16,
    .col-xs-17,
    .col-xs-18,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-13,
    .col-sm-14,
    .col-sm-15,
    .col-sm-16,
    .col-sm-17,
    .col-sm-18,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-13,
    .col-md-14,
    .col-md-15,
    .col-md-16,
    .col-md-17,
    .col-md-18,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-13,
    .col-lg-14,
    .col-lg-15,
    .col-lg-16,
    .col-lg-17,
    .col-lg-18 {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@grid-gutter-width / 2);
      padding-right: (@grid-gutter-width / 2);
    }
    
    // Extra small grid
    //
    // Grid classes for extra small devices like smartphones. No offset, push, or
    // pull classes are present here due to the size of the target.
    //
    // Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
    // it's full-width.
    
    .col-xs-1,
    .col-xs-2,
    .col-xs-3,
    .col-xs-4,
    .col-xs-5,
    .col-xs-6,
    .col-xs-7,
    .col-xs-8,
    .col-xs-9,
    .col-xs-10,
    .col-xs-11,
    .col-xs-12,
    .col-xs-13,
    .col-xs-14,
    .col-xs-15,
    .col-xs-16,
    .col-xs-17 {
      float: left;
    }
    .col-xs-1  { width: percentage((1 / @grid-columns)); }
    .col-xs-2  { width: percentage((2 / @grid-columns)); }
    .col-xs-3  { width: percentage((3 / @grid-columns)); }
    .col-xs-4  { width: percentage((4 / @grid-columns)); }
    .col-xs-5  { width: percentage((5 / @grid-columns)); }
    .col-xs-6  { width: percentage((6 / @grid-columns)); }
    .col-xs-7  { width: percentage((7 / @grid-columns)); }
    .col-xs-8  { width: percentage((8 / @grid-columns)); }
    .col-xs-9  { width: percentage((9 / @grid-columns)); }
    .col-xs-10 { width: percentage((10/ @grid-columns)); }
    .col-xs-11 { width: percentage((11/ @grid-columns)); }
    .col-xs-12 { width: 100%; }
    
    // Small grid
    //
    // Columns, offsets, pushes, and pulls for the small device range, from phones
    // to tablets.
    //
    // Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
    // it's full-width.
    
    @media (min-width: @screen-tablet) {
      .container {
        max-width: @container-tablet;
      }
    
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-13,
    .col-sm-14,
    .col-sm-15,
    .col-sm-16,
    .col-sm-17 {
      float: left;
    }
      .col-sm-1  { width: percentage((1 / @grid-columns)); }
      .col-sm-2  { width: percentage((2 / @grid-columns)); }
      .col-sm-3  { width: percentage((3 / @grid-columns)); }
      .col-sm-4  { width: percentage((4 / @grid-columns)); }
      .col-sm-5  { width: percentage((5 / @grid-columns)); }
      .col-sm-6  { width: percentage((6 / @grid-columns)); }
      .col-sm-7  { width: percentage((7 / @grid-columns)); }
      .col-sm-8  { width: percentage((8 / @grid-columns)); }
      .col-sm-9  { width: percentage((9 / @grid-columns)); }
      .col-sm-10 { width: percentage((10/ @grid-columns)); }
      .col-sm-11 { width: percentage((11/ @grid-columns)); }
      .col-sm-12 { width: percentage((12/ @grid-columns)); }
      .col-sm-13 { width: percentage((13/ @grid-columns)); }
      .col-sm-14 { width: percentage((14/ @grid-columns)); }
      .col-sm-15 { width: percentage((15/ @grid-columns)); }
      .col-sm-17 { width: percentage((16/ @grid-columns)); }
      .col-sm-17 { width: percentage((17/ @grid-columns)); }
      .col-sm-18 { width: 100%; }
    
      // Push and pull columns for source order changes
      .col-sm-push-1  { left: percentage((1 / @grid-columns)); }
      .col-sm-push-2  { left: percentage((2 / @grid-columns)); }
      .col-sm-push-3  { left: percentage((3 / @grid-columns)); }
      .col-sm-push-4  { left: percentage((4 / @grid-columns)); }
      .col-sm-push-5  { left: percentage((5 / @grid-columns)); }
      .col-sm-push-6  { left: percentage((6 / @grid-columns)); }
      .col-sm-push-7  { left: percentage((7 / @grid-columns)); }
      .col-sm-push-8  { left: percentage((8 / @grid-columns)); }
      .col-sm-push-9  { left: percentage((9 / @grid-columns)); }
      .col-sm-push-10 { left: percentage((10/ @grid-columns)); }
      .col-sm-push-11 { left: percentage((11/ @grid-columns)); }
    
      .col-sm-pull-1  { right: percentage((1 / @grid-columns)); }
      .col-sm-pull-2  { right: percentage((2 / @grid-columns)); }
      .col-sm-pull-3  { right: percentage((3 / @grid-columns)); }
      .col-sm-pull-4  { right: percentage((4 / @grid-columns)); }
      .col-sm-pull-5  { right: percentage((5 / @grid-columns)); }
      .col-sm-pull-6  { right: percentage((6 / @grid-columns)); }
      .col-sm-pull-7  { right: percentage((7 / @grid-columns)); }
      .col-sm-pull-8  { right: percentage((8 / @grid-columns)); }
      .col-sm-pull-9  { right: percentage((9 / @grid-columns)); }
      .col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
      .col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
    
      // Offsets
      .col-sm-offset-1  { margin-left: percentage((1 / @grid-columns)); }
      .col-sm-offset-2  { margin-left: percentage((2 / @grid-columns)); }
      .col-sm-offset-3  { margin-left: percentage((3 / @grid-columns)); }
      .col-sm-offset-4  { margin-left: percentage((4 / @grid-columns)); }
      .col-sm-offset-5  { margin-left: percentage((5 / @grid-columns)); }
      .col-sm-offset-6  { margin-left: percentage((6 / @grid-columns)); }
      .col-sm-offset-7  { margin-left: percentage((7 / @grid-columns)); }
      .col-sm-offset-8  { margin-left: percentage((8 / @grid-columns)); }
      .col-sm-offset-9  { margin-left: percentage((9 / @grid-columns)); }
      .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
      .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
    }
    
    // Medium grid
    //
    // Columns, offsets, pushes, and pulls for the desktop device range.
    //
    // Note that `.col-md-12` doesn't get floated on purpose—there's no need since
    // it's full-width.
    
    @media (min-width: @screen-desktop) {
      .container {
        max-width: @container-desktop;
      }
      .col-md-1,
      .col-md-2,
      .col-md-3,
      .col-md-4,
      .col-md-5,
      .col-md-6,
      .col-md-7,
      .col-md-8,
      .col-md-9,
      .col-md-10,
      .col-md-11,
      .col-md-12,
      .col-md-13,
      .col-md-14,
      .col-md-15,
      .col-md-16,
      .col-md-17 {
        float: left;
      }
      .col-md-1  { width: percentage((1 / @grid-columns)); }
      .col-md-2  { width: percentage((2 / @grid-columns)); }
      .col-md-3  { width: percentage((3 / @grid-columns)); }
      .col-md-4  { width: percentage((4 / @grid-columns)); }
      .col-md-5  { width: percentage((5 / @grid-columns)); }
      .col-md-6  { width: percentage((6 / @grid-columns)); }
      .col-md-7  { width: percentage((7 / @grid-columns)); }
      .col-md-8  { width: percentage((8 / @grid-columns)); }
      .col-md-9  { width: percentage((9 / @grid-columns)); }
      .col-md-10 { width: percentage((10/ @grid-columns)); }
      .col-md-11 { width: percentage((11/ @grid-columns)); }
      .col-md-12 { width: percentage((12/ @grid-columns)); }
      .col-md-13 { width: percentage((13/ @grid-columns)); }
      .col-md-14 { width: percentage((14/ @grid-columns)); }
      .col-md-15 { width: percentage((15/ @grid-columns)); }
      .col-md-17 { width: percentage((16/ @grid-columns)); }
      .col-md-17 { width: percentage((17/ @grid-columns)); }
      .col-md-18 { width: 100%; }
    
      // Push and pull columns for source order changes
      .col-md-push-0  { left: auto; }
      .col-md-push-1  { left: percentage((1 / @grid-columns)); }
      .col-md-push-2  { left: percentage((2 / @grid-columns)); }
      .col-md-push-3  { left: percentage((3 / @grid-columns)); }
      .col-md-push-4  { left: percentage((4 / @grid-columns)); }
      .col-md-push-5  { left: percentage((5 / @grid-columns)); }
      .col-md-push-6  { left: percentage((6 / @grid-columns)); }
      .col-md-push-7  { left: percentage((7 / @grid-columns)); }
      .col-md-push-8  { left: percentage((8 / @grid-columns)); }
      .col-md-push-9  { left: percentage((9 / @grid-columns)); }
      .col-md-push-10 { left: percentage((10/ @grid-columns)); }
      .col-md-push-11 { left: percentage((11/ @grid-columns)); }
    
      .col-md-pull-0  { right: auto; }
      .col-md-pull-1  { right: percentage((1 / @grid-columns)); }
      .col-md-pull-2  { right: percentage((2 / @grid-columns)); }
      .col-md-pull-3  { right: percentage((3 / @grid-columns)); }
      .col-md-pull-4  { right: percentage((4 / @grid-columns)); }
      .col-md-pull-5  { right: percentage((5 / @grid-columns)); }
      .col-md-pull-6  { right: percentage((6 / @grid-columns)); }
      .col-md-pull-7  { right: percentage((7 / @grid-columns)); }
      .col-md-pull-8  { right: percentage((8 / @grid-columns)); }
      .col-md-pull-9  { right: percentage((9 / @grid-columns)); }
      .col-md-pull-10 { right: percentage((10/ @grid-columns)); }
      .col-md-pull-11 { right: percentage((11/ @grid-columns)); }
    
      // Offsets
      .col-md-offset-0  { margin-left: 0; }
      .col-md-offset-1  { margin-left: percentage((1 / @grid-columns)); }
      .col-md-offset-2  { margin-left: percentage((2 / @grid-columns)); }
      .col-md-offset-3  { margin-left: percentage((3 / @grid-columns)); }
      .col-md-offset-4  { margin-left: percentage((4 / @grid-columns)); }
      .col-md-offset-5  { margin-left: percentage((5 / @grid-columns)); }
      .col-md-offset-6  { margin-left: percentage((6 / @grid-columns)); }
      .col-md-offset-7  { margin-left: percentage((7 / @grid-columns)); }
      .col-md-offset-8  { margin-left: percentage((8 / @grid-columns)); }
      .col-md-offset-9  { margin-left: percentage((9 / @grid-columns)); }
      .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
      .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
    }
    
    // Large grid
    //
    // Columns, offsets, pushes, and pulls for the large desktop device range.
    //
    // Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
    // it's full-width.
    
    @media (min-width: @screen-lg-desktop) {
      .container {
        max-width: @container-lg-desktop;
      }
    
      .col-lg-1,
      .col-lg-2,
      .col-lg-3,
      .col-lg-4,
      .col-lg-5,
      .col-lg-6,
      .col-lg-7,
      .col-lg-8,
      .col-lg-9,
      .col-lg-10,
      .col-lg-11,
      .col-lg-12,
      .col-lg-13,
      .col-lg-14,
      .col-lg-15,
      .col-lg-16,
      .col-lg-17 {
        float: left;
      }
      .col-lg-1  { width: percentage((1 / @grid-columns)); }
      .col-lg-2  { width: percentage((2 / @grid-columns)); }
      .col-lg-3  { width: percentage((3 / @grid-columns)); }
      .col-lg-4  { width: percentage((4 / @grid-columns)); }
      .col-lg-5  { width: percentage((5 / @grid-columns)); }
      .col-lg-6  { width: percentage((6 / @grid-columns)); }
      .col-lg-7  { width: percentage((7 / @grid-columns)); }
      .col-lg-8  { width: percentage((8 / @grid-columns)); }
      .col-lg-9  { width: percentage((9 / @grid-columns)); }
      .col-lg-10 { width: percentage((10/ @grid-columns)); }
      .col-lg-11 { width: percentage((11/ @grid-columns)); }
      .col-lg-12 { width: percentage((12/ @grid-columns)); }
      .col-lg-13 { width: percentage((13/ @grid-columns)); }
      .col-lg-14 { width: percentage((14/ @grid-columns)); }
      .col-lg-15 { width: percentage((15/ @grid-columns)); }
      .col-lg-16 { width: percentage((16/ @grid-columns)); }
      .col-lg-17 { width: percentage((17/ @grid-columns)); }
      .col-lg-18 { width: 100%; }
    
      // Push and pull columns for source order changes
      .col-lg-push-0  { left: auto; }
      .col-lg-push-1  { left: percentage((1 / @grid-columns)); }
      .col-lg-push-2  { left: percentage((2 / @grid-columns)); }
      .col-lg-push-3  { left: percentage((3 / @grid-columns)); }
      .col-lg-push-4  { left: percentage((4 / @grid-columns)); }
      .col-lg-push-5  { left: percentage((5 / @grid-columns)); }
      .col-lg-push-6  { left: percentage((6 / @grid-columns)); }
      .col-lg-push-7  { left: percentage((7 / @grid-columns)); }
      .col-lg-push-8  { left: percentage((8 / @grid-columns)); }
      .col-lg-push-9  { left: percentage((9 / @grid-columns)); }
      .col-lg-push-10 { left: percentage((10/ @grid-columns)); }
      .col-lg-push-11 { left: percentage((11/ @grid-columns)); }
    
      .col-lg-pull-0  { right: auto; }
      .col-lg-pull-1  { right: percentage((1 / @grid-columns)); }
      .col-lg-pull-2  { right: percentage((2 / @grid-columns)); }
      .col-lg-pull-3  { right: percentage((3 / @grid-columns)); }
      .col-lg-pull-4  { right: percentage((4 / @grid-columns)); }
      .col-lg-pull-5  { right: percentage((5 / @grid-columns)); }
      .col-lg-pull-6  { right: percentage((6 / @grid-columns)); }
      .col-lg-pull-7  { right: percentage((7 / @grid-columns)); }
      .col-lg-pull-8  { right: percentage((8 / @grid-columns)); }
      .col-lg-pull-9  { right: percentage((9 / @grid-columns)); }
      .col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
      .col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
    
      // Offsets
      .col-lg-offset-0  { margin-left: 0; }
      .col-lg-offset-1  { margin-left: percentage((1 / @grid-columns)); }
      .col-lg-offset-2  { margin-left: percentage((2 / @grid-columns)); }
      .col-lg-offset-3  { margin-left: percentage((3 / @grid-columns)); }
      .col-lg-offset-4  { margin-left: percentage((4 / @grid-columns)); }
      .col-lg-offset-5  { margin-left: percentage((5 / @grid-columns)); }
      .col-lg-offset-6  { margin-left: percentage((6 / @grid-columns)); }
      .col-lg-offset-7  { margin-left: percentage((7 / @grid-columns)); }
      .col-lg-offset-8  { margin-left: percentage((8 / @grid-columns)); }
      .col-lg-offset-9  { margin-left: percentage((9 / @grid-columns)); }
      .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
      .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search