user1383093 user1383093 - 4 months ago 27
CSS Question

Bootstrap grid overlay on zoom

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:

overlay zoom

What I want is:

Smaller components (including smaller texts, etc) in smaller screens without any overlay.

Zoom in area just seeing some components without overlay.

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



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>

<body ng-app="angularapp-example">
<div class="container-fluid">
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 1</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 2</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 3</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 4</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 5</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 6</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 7</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 8</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 9</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 10</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 11</a>
</div>
<div class="col-xs-1 col-sm-1 col-md-1">
<a href="#" class="btn btn-info">Buton 12</a>
</div>
</div>
</div>
<!-- Jquery and Bootstrap -->
<script src="dist/js/jquery.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>





Thank you so much.

Answer

Add the col-md-1 class directly to the a elements:

         <div class="container">
            <div class="row">
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 1</a>
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 2</a>
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 3</a>
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 4</a>
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 5</a>
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 6</a>
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 7</a>
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 8</a>
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 9</a>
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 10</a>
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 11</a>
                    <a href="#" class="col-md-1 col-sm-1 col-xs-1 btn btn-info">Buton 12</a>
            </div>
        </div>

Here is a fiddle: https://jsfiddle.net/o5qkq9f7/1/