Menu
I am using a Bootstrap 3 grid and I want cells that don't fit on the row to be hidden by the parent's overflow:hidden CSS property, instead of being displayed on the next line by Bootstrap ("stacked").
Is this possible? Please have a look at this example:
http://plnkr.co/edit/TYyEcYSe1MhZWTCFnJln?p=preview
<!DOCTYPE html>
<html>
<head>
<style>
#grid-container {
overflow: hidden;
}
#grid-container div {
background-color: #cdcdcd;
border-right: 1px solid white;
border-bottom: 1px solid white;
}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="grid-container" class="col-xs-12">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
Item 1
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
Item 2
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
Item 3
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
Item 4
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
Item 5
</div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
Item 6
</div>
</div>
</div>
</div>
</body>
</html>
In the example I would love everything to be on one single line, always, and have cells that don't fit hidden by the #grid-container overflow:hidden.
Thanks.
841
Once again I am going to answer my own question. I got stuck because I was searching for solutions specifically with Bootstrap.
To keep all divs on one line and have divs that don't fit hidden by the overflow:hidden of the parent add these ingredients to your css:
on the outer div (#grid-container in my case)
white-space: nowrap;
overflow: hidden;
On the inner divs/elements (#grid-container div in my case)
display: inline-block;
float: none; <!-- overrides Bootstrap's float:left for grid columns -->
A complete example is here:
http://plnkr.co/edit/8ns6Ov4fylTq97Z62MTj?p=preview
<!DOCTYPE html>
<html>
<head>
<style>
#grid-container {
white-space: nowrap;
overflow: hidden;
width: 80%;
}
.item {
width: 25%;
display: inline-block;
background-color: #cdcdcd;
border-right: 1px solid white;
border-bottom: 1px solid white;
}
</style>
</head>
<body>
<div id="grid-container">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
<div class="item">
Item 4
</div>
<div class="item">
Item 5
</div>
<div class="item">
Item 6
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With