如何在一行中获得三个div答案

【问题标题】：How to get three div in one line如何在一行中获得三个div
【发布时间】：2018-03-02 17:57:59
【问题描述】：

我想使用 bootstrap 将三个 div 对齐在一行中，并在第一个 div 和第二个 div 和最后一个 div 之间留出一点空间，如图所示：

我尝试使用此代码：

    <div class="row">
                  <div class="col-md-2">
                     <img src="img/emo_positif.png')}}">
                   </div>
                   <div class="col-md-7">
                     <div class="square1"></div>

                   </div>
                   <div class="col-md-3">
                     <img src="img/emo_negative.png')}}">
                   </div>
</div>

但它向我展示了 div 之间的大空间

【问题讨论】：

什么版本的 Bootstrap？
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
有很多方法可以做到这一点。例如，只需将display: flex 添加到您的row。
Yannick jansen，你检查我的答案了吗/pen？

标签： css html twitter-bootstrap

【解决方案1】：

使用Bootstrap 3：

.row {
  height: 24px;
}
.row > div {
  height: 100%;
}
.square {
  background: pink;
}
.square1 {
  background: #01a8ff;
  height: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >

<div class="row">
  <div class="col-xs-2 square">
  </div>
  <div class="col-xs-8">
    <div class="square1"></div>
  </div>
  <div class="col-xs-2 square">
  </div>
</div>

检查此Pen。阅读docs。

【讨论】：

【解决方案2】：

用于在同一行中进行三个划分。有很多方法。为了更好的用户体验，在 css 中使用 display:flex 作为父部门

谢谢

【讨论】：