我不确定如何继续解决这个问题。我试图简单地在行的中心对齐具有显式最大宽度的3列。这是我的代码,我正在使用bootstrap3:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-3">
<h4>box 1</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
<div class="col-sm-3">
<h4>box 2</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
<div class="col-sm-3">
<h4>box 3</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
<div class="col-sm-1"></div>
</div>
</div>
如果我没有明确的最大宽度,那么问题不是 ,因为宽度始终是响应的,我可以留下那些空列占位符。在任何情况下,我都需要有最大宽度。
答案 0 :(得分:1)
你看看弹性盒子吗?
https://www.w3schools.com/css/css3_flexbox.asp
删除你的第一个和最后一个div(col-sm-2和col-sm-1)
(我只是添加颜色来区分列,而typz(){
}
只是为了演示)
max-width
.row{
display: flex;
justify-content: center;
}
.row div{
max-width: 100px;
}