Bootstrap tab as a tab for mobile

Question

I am developing a bootstrap tab for mobile devices. But the problem is that although the tabs in the browser for the desktop are fine, but when it changes to the size of the mobile screen, the tabs go one below the other. It is automatically configured due to responsiveness. But I want it to be responsive, but also be in the form of a tab in a mobile device.

html:

<section class="panel">
                <header class="panel-heading bg-light">
                  <ul class="nav nav-tabs nav-justified">
                    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                    <li><a href="#profile" data-toggle="tab">Profile</a></li>
                    <li><a href="#messages" data-toggle="tab">Messages</a></li>
                  </ul>
                </header>
                <div class="panel-body">
                  <div class="tab-content">
                    <div class="tab-pane active" id="home">home</div>
                    <div class="tab-pane" id="profile">profile</div>
                    <div class="tab-pane" id="messages">message</div>
                  </div>
                </div>
              </section>

Here is the fiddle http://jsfiddle.net/LdWUV/

How can i achieve this?

Answer 1

, javascript serveride. GitHub 9048, 10688, 7540 (,), bootstrap tab. GitHub, .

Answer 2

, :

@media only screen and (max-width: 767px) 
{
    .nav-tabs li
    {
        width:100%!important;
    }
    .tab-content .tab-pane
    {
       display:block!important; 
    }
}

, , css- css . , xs, . , .