css - 如何默认调整导航选项卡以适应移动设备分辨率？

Question

我有一个使用 twitter bootstrap 3 开发的导航选项卡。但是，默认情况下它不会调整为移动分辨率。我如何使用类(class)调整它？

代码:

<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="tabbable" id="tabs-85910">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#panel-421853" data-toggle="tab">Home</a>
                </li>
                <li>
                    <a href="#panel-277629" data-toggle="tab">Personal Details</a>
                </li>
                <li>
                    <a href="#panel-277620" data-toggle="tab">Product Details</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="panel-421853">
                    <p>
                        I'm in Section 1.
                    </p>
                </div>
                <div class="tab-pane" id="panel-277629">
                    <p>
                        Howdy, I'm in Section 2.
                    </p>
                </div>
                <div class="tab-pane" id="panel-277620">
                    <p>
                        Howdy, I'm in Section 3.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

附加问题的屏幕截图。

Answer 1

添加这个 html :-

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".tabbable">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>

<ul class="nav nav-tabs" class="collapse">