Bagaimana untuk meningkatkan keupayaan interaksi dua medan hubungan?

Question

Saya perlu memusatkan dua medan ("Panggil Kami" dan "E-mel Kami") dan menjadikannya responsif pada masa yang sama. Mereka harus disusun bersama pada skrin kecil. Saya mempunyai CSS sebaris untuk meletakkannya dengan betul pada skrin besar seperti yang ditunjukkan, tetapi ia tidak disusun bersama seperti yang sepatutnya pada skrin kecil. Saya menggunakan CSS sebaris kerana saya tidak dapat mencari fail CSS untuk meletakkan kod tersebut. Adakah mungkin untuk menggunakan CSS sebaris untuk membetulkannya? Jika anda boleh, inilah CSS sebaris yang saya ada yang menjadikan kedua-dua medan dipusatkan dengan betul pada skrin besar.

  


Sekali lagi, kod ini tidak menjadikan kedua-dua medan ini responsif, iaitu boleh disusun pada skrin kecil. Pada mulanya terdapat tiga bidang. Medan ketiga ialah "Alamat Kami" tetapi saya mengeluarkannya. 
Saya cuba menambah CSS sebaris dan mengharapkan ia responsif pada skrin kecil, tetapi tidak berjaya. 
            

Answer 1

Nampaknya anda sedang menggunakan rangka kerja Bootstrap. Nama kelas row应用了display: flex，所以你的内联样式是多余的。你应该使用justify-content-center Nama kelas menggantikan gaya sebaris.

Anda ada:

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

sepatutnya:

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

Menentukan bilangan lajur yang sama pada setiap titik putus adalah berlebihan. Hanya gunakan nama kelas yang sesuai pada titik putus yang anda mahu perubahan berlaku, kerana ia akan digunakan untuk semua titik putus yang lebih besar.

Anda ada:

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

sepatutnya:

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

Memandangkan anda tidak memberikan contoh yang boleh dibuat semula, saya hanya boleh meneka rupa struktur anda.

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