Bootstrap grid overlay on zoom
<p>I've the following code with bootstrap and jquery imported and the grid system is working fine on my screen. But when I try the zoom in or in smaller screens the buttons are overlaying:</p>

<p><a href="http://i.stack.imgur.com/rpW98.png" rel="nofollow">overlay zoom</a></p>

<p>What I want is:</p>

<p>Smaller components (including smaller texts, etc) in smaller screens without any overlay.</p>

<p>Zoom in area just seeing some components without overlay.</p>

<p>I tried both "container" and "contanier-fluid" and also different meta headers without success . Is there any way to do that just using bootstrap?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
        &lt;link rel="stylesheet" href="dist/css/bootstrap.min.css"&gt;
    &lt;/head&gt;
    
    &lt;body ng-app="angularapp-example"&gt;
        &lt;div class="container-fluid"&gt;
            &lt;div class="row"&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 1&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 2&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 3&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 4&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 5&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 6&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 7&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 8&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 9&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 10&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 11&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="col-xs-1 col-sm-1 col-md-1"&gt;
                    &lt;a href="#" class="btn btn-info"&gt;Buton 12&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Jquery and Bootstrap --&gt;
        &lt;script src="dist/js/jquery.js"&gt;&lt;/script&gt;
        &lt;script src="dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Thank you so much.</p>