두 연락처 필드의 상호 작용 능력을 향상시키는 방법은 무엇입니까?

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

다시 말하지만, 이 코드는 이 두 필드를 반응형으로 만들지 않습니다(예: 작은 화면에서 쌓을 수 있음). 처음에는 세 개의 필드가 있습니다. 세 번째 필드는 "우리 주소"였지만 제거했습니다.

인라인 CSS를 추가하고 작은 화면에서 반응할 것으로 기대했지만 성공하지 못했습니다.

Answer 1

Bootstrap 프레임워크를 사용하고 있는 것 같습니다. 클래스 이름 row应用了display: flex，所以你的内联样式是多余的。你应该使用justify-content-center 클래스 이름은 인라인 스타일을 대체합니다.

당신은:

으아악

다음과 같아야 합니다:

으아악

모든 중단점에 동일한 수의 열을 지정하는 것은 중복됩니다. 모든 더 큰 중단점에 적용되므로 변경을 원하는 중단점에서만 적절한 클래스 이름을 사용하십시오.

당신은:

으아악

다음과 같아야 합니다:

으아악

재현 가능한 예를 제공하지 않았기 때문에 구조가 어떻게 생겼는지 추측만 할 수 있습니다.

으아악