需要在一堆 div 标签周围有一个边框

Question

我需要在四个 div 元素周围有一个边框，这些元素将显示为一行。 检查图片

这是我正在使用的模板：

<div class="col-sm-12">
    <div class="row">
        <div class="col-sm-3">
          <div class="well">
           <div align = "center">
            <h4>Forecasted Cum.Oil (STB)</h4>
            <h3><b>{{cum_oil_rate}}</b></h3> 
           </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="well">
           <div align = "center">
            <h4>Forecasted Cum.Water (STB)</h4>
            <h3><b>{{cum_water_rate}}</b></h3> 
           </div> 
          </div>
        </div>
        <div class="col-sm-3">
          <div class="well">
           <div align = "center">
            <h4>Last Decline Rate</h4>
            <h3><b>{{decline_rate}}</b></h3> 
           </div> 
          </div>
        </div>
        <div class="col-sm-3">
          <div class="well">
           <div align = "center">
            <h4>Final Oil Rate (STBD)</h4>
            <h3><b>{{final_oil_rate}}</b></h3> 
           </div> 
          </div>
        </div>
      </div>

现在我需要将这四个 div 元素包含在一个盒子中。 有人可以帮助我如何做到这一点吗？

Answer 1

将自定义类添加到您的<div class="row my-class">

然后在你的 CSS 添加：

.my-class {
    border: 1px solid black;
}

Answer 2

.col-sm-3 {
    border: 1px solid black;
}
.row {
    border: 1px solid black;
}

尝试这个