如何使用bootstrap3在行中心对齐3列最大宽度?

时间:2018-03-24 23:38:20

标签: html css twitter-bootstrap

我不确定如何继续解决这个问题。我试图简单地在行的中心对齐具有显式最大宽度的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>

如果我没有明确的最大宽度,那么问题不是 ,因为宽度始终是响应的,我可以留下那些空列占位符。在任何情况下,我都需要有最大宽度。

1 个答案:

答案 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;
}