如何增强两个联系字段的互动能力？

Question

我需要将两个字段（"Call Us"和"Our Email"）居中，并同时使它们具有响应性。它们应该在小屏幕上堆叠在一起。我有内联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">

再次强调，这段代码不能使这两个字段具有响应性，即不能在小屏幕上堆叠。最初有三个字段。第三个字段是"Our Address"，但我将其删除了。

我尝试添加内联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>