Unable to center multiple col's in bootstrap 3
-
20-12-2019 - |
题
I'm trying to center 7 inline columns within a row that I created using bootstrap. I've tried every solution that I could find (except for absolute positioning, which I don't want). My original plan was to add an extra container div around the list of col-md-1 divs, but when I do, the div is sets its self to fit 100% of the row rather than only 100% of the width of all the cols. My code is as follows:
HTML:
<div class="container">
<div class="row">
<div class="col-md-12" style="background-color: pink;">
<div class="row">
<div class="col-md-1">
Hello
</div>
<div class="col-md-1">
Hello
</div>
<div class="col-md-1">
Hello
</div>
<div class="col-md-1">
Hello
</div>
<div class="col-md-1">
Hello
</div>
<div class="col-md-1">
Hello
</div>
<div class="col-md-1">
Hello
</div>
</div>
</div>
</div>
</div>
CSS:
.container .row .col-md-12 .row {
text-align: center;
}
.col-md-1 {
width: 125px;
height: 80px;
margin-right: 7px;
background-color: #E6E6E6;
display: inline-block;
}
.col-md-1:last-child {
margin-right: 0;
}
Also, here is a bootply:
解决方案
This is because the default style adds float: left;
to the columns as can be seen on the following snippet:
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
From my point of view, the best way to center a column would be to use offset. This will prevent you from causing unexpected bevavior of the Bootstrap's grid.
其他提示
What browser support do you need? If can live without IE9- it is easy to do with Flexbox:
.container .row .col-md-12 .row {
display: flex;
justify-content: center;
}
Of course, the reality is not that simple. You need the -webkit- prefix for Safari, a different syntax for IE10 (IE11 uses the modern syntax) and a different syntax again for old versions of Firefox (with -moz- prefix) and Safari/Chrome (-webkit). Just pick and choose depending on how far back you need to go.