Wie kann die Interaktionsfähigkeit zweier Kontaktfelder verbessert werden?

Question

Ich muss zwei Felder („Ruf uns an“ und „Unsere E-Mail“) zentrieren und sie gleichzeitig responsiv machen. Sie sollten auf kleinen Bildschirmen gestapelt werden. Ich habe Inline-CSS, um sie wie gezeigt auf großen Bildschirmen korrekt zu positionieren, aber sie stapeln sich nicht so, wie sie es auf kleinen Bildschirmen sollten. Ich verwende Inline-CSS, weil ich die CSS-Datei zum Einfügen des Codes nicht finden kann. Ist es möglich, dieses Problem mit Inline-CSS zu beheben? Wenn Sie können, finden Sie hier das Inline-CSS, das ich habe und das die beiden Felder auf großen Bildschirmen korrekt zentriert.

<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">

Auch dieser Code macht diese beiden Felder nicht responsiv, d. h. stapelbar auf kleinen Bildschirmen. Zunächst gibt es drei Felder. Das dritte Feld war „Unsere Adresse“, aber ich habe es entfernt.

Ich habe versucht, Inline-CSS hinzuzufügen und habe erwartet, dass es auf kleinen Bildschirmen reagiert, aber ohne Erfolg.

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>