引导程序将整行中的所有列居中 [英] Bootstrap center all columns in whole row
问题描述
我当前正在使用Bootstrap创建网页，并且正在使用列。我的页面看起来像这样：
我想将最后一列居中（在第二行中），但是页面是动态的，我不知道有多少个容器。
我在Google上找到了这两个解决方案：
1）将其添加到我的CSS中：
.col-居中{
浮动：无；
保证金：0自动；
}
2）将此添加到class tag属性
col-lg-offset-4
但是两种解决方案都像这样：
那不是我想要的。我希望它看起来像这样：
< br>
如何实现？
Bootstrap的列默认情况下是浮动的css float 属性。使用 float ，我们无法对列进行中间对齐。但是，通过 display：inline-block 我们可以。我们需要做的是从列样式中删除 float 并将其更改为 inline-block 和 vertical-align：middle ，您将得到想要的东西。但是不要忘记删除 inline-block 附带的多余空间。
这是诀窍。 / p>
.wrapper {背景：绿色； padding：20px 0;}。box {border-radius：10px;底边距：30px;背景：#fff;填充：10px;颜色：＃000;}。center-align {字母间距：-4px；文本对齐：居中； font-size：0;}。center-align [class * =’col-’] {display：inline-block;垂直对齐：顶部；字母间距：0； font-size：14px; float：none;}
< link href = https ：//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css rel = stylesheet />< div class = wrapper> < div class = container center-align> < div class = row> < div class = col-xs-4> < div class = box> < Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 < / div> < / div> < div class = col-xs-4> < div class = box> < Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 < / div> < / div> < div class = col-xs-4> < div class = box> < Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 < / div> < / div> < div class = col-xs-4> < div class = box> < Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 < / div> < / div> < / div> < / div> < div class = container center-align> < div class = row> < div class = col-xs-4> < div class = box> < Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 < / div> < / div> < div class = col-xs-4> < div class = box> < Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 < / div> < / div> < div class = col-xs-4> < div class = box> < Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 < / div> < / div> < div class = col-xs-4> < div class = box> < Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 < / div> < / div> < div class = col-xs-4> < div class = box> < Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 Lorem ipsum dolor坐在amet。 < / div> < / div> < / div> < / div>< / div>
注意：设置字体大小：0；字母间距：在父级上为-4px，并应用父级的字体大小：14px； letter-spacing：子元素上的0返回将删除inline-block附带的空白。
I'm currently creating a web page with Bootstrap and I'm using columns. My page looks like that:
I'd like to center the last column (in the second row) but the page is dynamic and I don't know how many containers there are.
I found this two solutions on Google:
1) Add this to my css:
.col-centered{
float: none;
margin: 0 auto;
}
2) Add this to the class tag attribute
col-lg-offset-4
But both solutions look like this:
That is not what i want. I want it to look like this:
How can i achieve this?
Bootstrap's columns are floating by default with css float property. With float we can't middle align columns. However with display: inline-block we can. All we need is to remove float from styles of columns and change them to inline-block with vertical-align: middle and you will get what you want. But don't forget to remove extra space that comes with inline-block.
Here is the trick.
.wrapper {
background: green;
padding: 20px 0;
}
.box {
border-radius: 10px;
margin-bottom: 30px;
background: #fff;
padding: 10px;
color: #000;
}
.center-align {
letter-spacing: -4px;
text-align: center;
font-size: 0;
}
.center-align [class*='col-'] {
display: inline-block;
vertical-align: top;
letter-spacing: 0;
font-size: 14px;
float: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
Note: Setting font-size: 0; letter-spacing: -4px on parent and applying parent's font-size: 14px; letter-spacing: 0 back on child elements will remove white space that comes with inline-block.
这篇关于引导程序将整行中的所有列居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
