bootstrap nav-stacked类在非常小的屏幕上显示错误

Question

我正在使用带有烧瓶的bootstrap来构建一个Web应用程序。我的代码如下：

<div class="container col-xs-12">
    <div class="jumbotron" style="background:url({{ url_for('static', filename='jumbotron-grass-bw.png') }});
                                  background-size:cover;">
        <h2><strong>Even we are ordinary, we can live better!</strong></h2>
        <p style="color:#333333">I make PERSONAL server by which we can share information without control from those "big" and reach the real FREEDOM.</p>
        <p>&nbsp;</p>
    </div>


    <ul class="nav nav-pills nav-stacked col-xs-2">
        <li class="active"><a href="#tab1" data-toggle="tab">Personal</a></li>
        <li><a href="#tab2 " data-toggle="tab">Circle1</a></li>
        <li><a href="#tab3" data-toggle="tab">Circle2</a></li>
        <li><a href="#tab4" data-toggle="tab">Circle3</a></li>
    </ul>

    <div class="tab-content col-xs-10">
        <div class="tab-pane active" id="tab1">
            <p>Tab 1 content goes here...abcdektessseedddddddddddddd here..ahaha!</p>
        </div>
        <div class="tab-pane" id="tab2">
            <p>Tab 2 content goes here...</p>
        </div>
        <div class="tab-pane" id="tab3">
            <p>Tab 3 content goes here...</p>
        </div>
        <div class="tab-pane" id="tab4">
            <p>Tab 4 content goes here...</p>
        </div>
    </div>
</div>

我使用IPHONE6作为测试设备在非常小的屏幕上验证显示效果，我得到以下结果：

更大的屏幕分辨率没有问题。

因此，在非常小的屏幕上显示引导程序的错误还是编码错误？

谢谢！

Answer 1

你可以做几件事：

1. 调整您的代码。尽管您的div class="container nav"形成是正确的，但它似乎并不符合您对此特定网页设计的最佳兴趣。尝试更改它，以便选项卡菜单更宽一点，我们可以说col而不是col-xs-4。这样，当您调整到iPhone 6的大小时，您的问题应该得到解决。示例代码如下：

   col-xs-2

2. 您可以尝试再次更改比例，以便更好地适合您，直到您达到所需的标准。

3. 使用媒体查询。如果您仍然遇到问题，请尝试使用媒体查询，以便根据自己的喜好设置移动版本的样式。这样，您可以在代码中指定屏幕宽度和高度。 W3S Media Queries

这是一个JS小提琴我在第1点的解决方案。

Solution regarding point 1