Create Responsive Tabs using Bootstrap (They should get stacked automatically on smaller screens)

Question

How can I create responsive tabs which get stacked automatically using bootstrap. The code for my navs is -

    


        
                      

              相关标签:
       
      

Answer 1

This should work:

@media (max-width: 480px) { 
    .nav-tabs > li {
        float:none;
    }
}

Answer 2

If you find that 480 doesn't do it (I have long tab titles), you can always change your max-width. I used:

@media (max-width: 991px) { 
 .nav-tabs > li {
    float:none;
 }
}

and it works like a charm.

Answer 3

    @media (max-width: 480px) {
        .nav-tabs > li {
            float:none;
            margin-bottom: 0px;
        }
        .nav-tabs > li.active > a {
            border: 1px solid #ffffdffffd;
        }
        .nav-tabs > li.active > a:hover {
            border: 1px solid #ffffdffffd;
        }
        .nav-tabs > li  > a {
            border-bottom: 1px solid #ffffdffffd;
            border-left: 1px solid #ffffdffffd;
            border-right: 1px solid #ffffdffffd;
        }
        .nav-tabs > li > a:hover {
            border-color: #ffffdffffd;
        }
    }

This one is more simple and good-looking.

Answer 4

With BootStrap version 3, you have everything stacked in a clean vertical way for Extra Small Device by adding 4 CSS classes. BootStrap and Tab does not render greatly as you have noticed. The code below can do the job by removing all background and border.

@media (max-width: 767px) { 
    .nav-tabs > li {
        float:none;
        border:1px solid #ffffdffffd;
    }
    .nav-tabs > li.active > a{
        border:none;
    }
    .nav > li > a:hover, .nav > li > a:focus,
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
     {
        background:none;
        border:none;
    }
}

Answer 5

The other solutions here still leave much to be desired, in my opinion. Here is a solution that builds on the earlier solutions but uses CSS flexbox. The tabs stay side by side when possible, wrap to multiple lines only when needed, and still fill the width of the screen, with the horizontal space distributed evenly. It looks clean and balanced, and scales well to handle longer tabs or larger numbers of tabs. It also resolves some border and border-radius issues of the other solutions.

SCSS:

@media (max-width: $screen-xs-max) {
  .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-right: 1px;
    > li {
      flex: auto;
      text-align: center;
      border: 1px solid $nav-tabs-border-color;
      margin-right: -1px;
      > a {
        margin: 0;
      }
      &.active {
        background: $gray-lighter;
        > a, > a:hover, > a:focus {
          border: none;
          background: none;
        }
      }
    }
  }
}

Or, plain CSS:

@media (max-width: 767px) {
  .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-right: 1px;
  }
  .nav-tabs > li {
    flex: auto;
    text-align: center;
    border: 1px solid #ffffd;
    margin-right: -1px;
  }
  .nav-tabs > li > a {
    margin: 0;
  }
  .nav-tabs > li.active {
    background: #eee;
  }
  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    border: none;
    background: none;
  }
}

Answer 6

If you are using SCSS or LESS support, you should use the proper media query vars:

In SCSS:

  @media (max-width: $screen-md-min) {
    .nav-tabs > li {
      float:none;
    }
  }

In Less:

  @media (max-width: @screen-md-min) {
    .nav-tabs > li {
      float:none;
    }
  }

Check http://getbootstrap.com/css/ for details regarding the possible vars.