html - 对齐框彼此相邻

Question

我有 3 个简单的盒子，我想将它们水平对齐。但目前它们只是垂直堆叠在一起。我也在为“行”类使用 Twitter Boostrap。

HTML:

.img-box-kai {
        width: 300px;
        height: 450px;
        border: 3px solid red;
    }
    
    .img-box-lucas {
        width: 300px;
        height: 450px;
        border: 3px solid red;
    }
    
    .img-box-bryant {
        width: 300px;
        height: 450px;
        border: 3px solid red;
    }

<div class="container">
      <div class="row">
        <div class="img-box-kai">Rectangle Test</div>
        <div class="img-box-lucas">Rectangle Test</div>
        <div class="img-box-bryant">Rectangle Test</div>
      </div>
    </div>

这是它们目前的样子:picture

Answer 1

如果您打算使用 Bootstrap，您需要删除设置的宽度并使用 grid system使用 Bootstrap 水平堆叠它们:

.img-box-kai {
    height: 450px;
    border: 3px solid red;
}

.img-box-lucas {
    height: 450px;
    border: 3px solid red;
}

.img-box-bryant {
    height: 450px;
    border: 3px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4 img-box-kai">Rectangle Test</div>
    <div class="col-xs-4 img-box-lucas">Rectangle Test</div>
    <div class="col-xs-4 img-box-bryant">Rectangle Test</div>
  </div>
</div>