bootstrap nav-stacked class has wrong display on the very small screen - html

Question

I am using bootstrap with flask to build a web app. my code is as follows:
<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> </p>
</div>
<ul class="nav nav-pills nav-stacked col-xs-2">
<li class="active">Personal</li>
<li>Circle1</li>
<li>Circle2</li>
<li>Circle3</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>
I am using IPHONE6 as the test device to verify the display effect on a very small screen, and I get the following result:
There is NO problem on larger screen resolution.
So is there a bug for bootstrap display on very small screen or I did a wrong coding?
Thanks!

Answer 1

Well there are several things you could do:
Adjust your code. Even though your col formation is correct, it doesn't seem to suit your best interest in the designing of this particular web page. Try changing it so the tab menu is a bit wider with lets say col-xs-4 instead of col-xs-2 as you previously did. This way when you resize down to an iPhone 6, your problem should be fixed. The example code is down below:
<ul class="nav nav-pills nav-stacked col-xs-4">
<li class="active">Personal</li>
<li>Circle1</li>
<li>Circle2</li>
<li>Circle3</li>
</ul>
<div class="tab-content col-xs-8">
<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>
You could try and change the ratio again so it suits you better, until you've met your required criteria.
Use media queries. If you are still having issues, try using media queries in order to style the mobile version to your liking. This way you can specify the screen width and height in your code. W3S Media Queries
Here is a JS Fiddle with my solution on point 1.
Solution regarding point 1