我不确定如何解决这个问题。我试图简单地对齐 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>
如果我没有明确的最大宽度,那么问题就不会困难,因为宽度总是响应式的,我可以只留下那些空的列占位符。无论如何,我确实需要设置最大宽度。
最佳答案
你检查过 flex box 了吗?
https://www.w3schools.com/css/css3_flexbox.asp
删除第一个和最后一个 div(col-sm-2 和 col-sm-1)
(我只是添加颜色来区分列,max-width
只是为了演示)
.row{
display: flex;
justify-content: center;
}
.row div{
max-width: 100px;
}
<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-3" style="background:red;">
<h4>box 1</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
<div class="col-sm-3" style="background:green;">
<h4>box 2</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
<div class="col-sm-3" style="background:lightblue;">
<h4>box 3</h4>
<p>some text dfgdfgdfgdfg</p>
</div>
</div>
</div>
关于html - 如何使用 bootstrap 3 将 3 列与行中心的最大宽度对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49471070/