如何在彼此下方显示元素？答案

【问题标题】：How to display elements below each other?如何在彼此下方显示元素？
【发布时间】：2021-02-23 20:43:06
【问题描述】：

我有以下内容：

<div class="container-fluid" id="contact">
  <div class="row justify-content-center" align="center">
    <div class="col-lg-6 d-flex justify-content-center">
      <div>
        <img src="icon-mail.png" style="padding-right:20px;">
      </div>
      <div>
        <h4>E-mail</h4>
        <p>gmail@gmail.sk</p>
      </div>
    </div>
    <div class="col-lg-6 d-flex justify-content-center">
      <div>
        <img src="icon-tel.png" style="padding-right:20px;">
      </div>
      <div>
        <h4>Call us</h4>
        <p>+00000000000</p>
      </div>
    </div>
  </div>
</div>

这是屏幕尺寸 >992 的视图：

这是屏幕的视图

如何在 image2 中显示彼此下方的元素？我不知道为什么，但是“display:block”不起作用。

【问题讨论】：

使用媒体查询并使其 100% 宽
将 'col-md-6' 类替换为 'col-lg-6'

标签： html css bootstrap-4

【解决方案1】：

你可以使用

<div class="row">

创建单独的内容行以满足您的需求。

我建议阅读本文中有关网格系统的内容：

https://getbootstrap.com/docs/4.0/layout/grid/

<div class="container-fluid" id="contact">
  <div class="row justify-content-center" align="center">
    <div class="col-lg-6 d-flex justify-content-center">
      <div>
        <img src="icon-mail.png" style="padding-right:20px;">
      </div>
      <div>
        <h4>E-mail</h4>
        <p>gmail@gmail.sk</p>
      </div>
    </div>
  </div>
  <div class="row justify-content-center" align="center">
    <div class="col-lg-6 d-flex justify-content-center">
      <div>
        <img src="icon-tel.png" style="padding-right:20px;">
      </div>
      <div>
        <h4>Call us</h4>
        <p>+00000000000</p>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

在 bootstrap 5 中有一个名为 order 的选项。因此，在您的问题中，您可以将一个名为 order-md-2 的类添加到您想要向下移动的内容中，并将 order-md-1 添加到您想要向上移动的内容中。

<div class="container-fluid" id="contact">
  <div class="row justify-content-center" align="center">
    <div class="col-lg-6 d-flex justify-content-center">
      <div class="order-md-1">
        <img src="icon-mail.png" style="padding-right:20px;">
      </div>
      <div>
        <h4>E-mail</h4>
        <p>gmail@gmail.sk</p>
      </div>
    </div>
    <div class="col-lg-6 d-flex justify-content-center">
      <div class="order-md-2">
        <img src="icon-tel.png" style="padding-right:20px;">
      </div>
      <div>
        <h4>Call us</h4>
        <p>+00000000000</p>
      </div>
    </div>
  </div>
</div>

希望我的回答对你有帮助

【讨论】：

【解决方案3】：

你可以简单地使用 flexbox 的 flex-direction。

<div class="container-fluid" id="contact">
  <div class="row justify-content-center" align="center">
    <div class="col-lg-6 d-flex justify-content-center">
      <div class="order-md-1">
        <img src="icon-mail.png" style="padding-right:20px;">
      </div>
     <div class='contacts'>
      <div class='mail'>
        <h4>E-mail</h4>
        <p>gmail@gmail.sk</p>
      </div>
    </div>
    <div class="col-lg-6 d-flex justify-content-center">
      <div class="order-md-2">
        <img src="icon-tel.png" style="padding-right:20px;">
      </div>
      <div class='phone'>
        <h4>Call us</h4>
        <p>+00000000000</p>
      </div>
    </div>
  </div>
</div>
   </div>

内部 CSS：

.contacts {
display: flex;
flex-direction: column;

}

这应该允许您将两个 div 容器定向到彼此下方。

【讨论】：