并排设置两个 .col [重复]

【问题标题】：Set two .col side by side [duplicate]并排设置两个 .col [重复]
【发布时间】：2022-01-17 01:32:36
【问题描述】：

每当我更改显示大小时，2 列就会相互跳动。我如何让它们彼此相邻

<div class="col-md-2 d-flex justify-content-center header-phone">
  <i class="fa fa-phone fa-3x"  ></i>
    <div class="col text-center " ><h5>Rufen Sie uns an</h5><h5>+49 7433 2106989</h5></div>
</div>
<div class="col-md-2 d-flex justify-content-center  header-mail" >
  <h5 class="col-4 d-flex justify-content-center text-center" >Kontakt</h5>
</div>

【问题讨论】：

你在使用引导程序吗？
您需要使用引导网格类的其余部分来支持较小的视口，例如：col-sm、col-xs
@DCR 是的，这些是引导类

标签： html css twitter-bootstrap

【解决方案1】：

在容器中放置两个div 元素并为容器设置display:flex;。

.container-div{
  display: flex;
}
.container-div div{
  border: 2px solid red;
  flex-basis: 50%;
}

<div class="container-div">
<div class="col-md-2 d-flex justify-content-center header-phone">
  <i class="fa fa-phone fa-3x"  ></i>
    <div class="col text-center " ><h5>Rufen Sie uns an</h5><h5>+49 7433 2106989</h5></div>
</div>
<div class="col-md-2 d-flex justify-content-center  header-mail" >
  <h5 class="col-4 d-flex justify-content-center text-center" >Kontakt</h5>
</div>
</div>

【讨论】：

#M.R MRF 非常感谢。效果很好