html - 如何使用 bootstrap 3 将 3 列与行中心的最大宽度对齐？

Question

我不确定如何解决这个问题。我试图简单地对齐 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>

如果我没有明确的最大宽度，那么问题就不会困难，因为宽度总是响应式的，我可以只留下那些空的列占位符。无论如何，我确实需要设置最大宽度。

Answer 1

你检查过 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>