如何增強兩個聯繫欄位的互動能力？

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>