如何使两个联系人字段响应

Question

我需要将两个字段（“致电我们”和“我们的电子邮件”）居中并让它们同时响应。他们应该在小屏幕上将一个堆叠在另一个之上。我使用内联 CSS 将它们正确定位在大屏幕上，如图所示，但它们不会像应有的那样在小屏幕上彼此堆叠。我使用内联CSS，因为我找不到放置代码的CSS文件。是否可以使用内联CSS来解决这个问题？如果是这样，这就是我的内联 CSS，它使两个字段在大屏幕上正确居中。

<div style="justify-content: center; display:flex; class="row"> 
  <div class="col-xl-4 col-xs-4 col-lg-4 col-md-4 col-sm-4 col-12 footer_contact_info">

同样，此代码不会使这两个字段具有响应性，即它不会使它们堆叠在小屏幕上。最初有三个字段。第三个是“我们的地址”，但我删除了它。

我尝试添加内联 CSS，并期望它能够在小屏幕上响应，但它不起作用。

Answer 1

看来您正在使用 Bootstrap 框架。类

row

适用于

display: flex

，因此您的内联样式是多余的。您还应该使用

justify-content-center

类而不是内联样式。

你有：

<div style="justify-content: center; display:flex; class="row">

应该是：

<div class="row justify-content-center">

在每个断点处指定相同的列数是多余的。仅对您希望发生更改的断点使用适当的类，因为它将应用于所有较大的断点。

你有：

<div class="col-xl-4 col-xs-4 col-lg-4 col-md-4 col-sm-4 col-12 footer_contact_info">

应该是：

<div class="col-sm-4 col-12 footer_contact_info">

由于您没有提供可重现的示例，我不得不猜测您的结构是什么。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row justify-content-center"> 
    <div class="col-sm-4 col-12 footer_contact_info">Call Us</div>
    <div class="col-sm-4 col-12 footer_contact_info">Our Email</div>
  </div>
</div>

Answer 2

将

flex-direction:column

添加到第一个

style

的

div

中，如果不起作用，只需从第一个 div 中删除

class="row"

并从第二个

div

中删除其他类

例如：

<div style=" display:flex; flex-direction:column; align-items:center"> 
<div>
 

顺便说一下，在列顺序中，

justify-content

没有任何效果，如果您希望您的项目位于页面的中心，只需将

justify-content

替换为

align-items

，就像我上面所做的那样，但是如果您不希望它位于中心，只需忽略并删除该部分即可。