Bootstrap Grid 시스템을 사용하여 대형 화면에서 이미지와 진행률 표시줄 사이의 간격을 수정하는 방법은 무엇입니까?

Question

먼저 이 그림의 아이디어를 보여드리겠습니다. 그림 (1) 이 그림에서 우리는 md/lg 화면에서 진행률 표시줄이 그림 아래에 있고 텍스트가 그림 오른쪽에 있는 것을 볼 수 있습니다.

그림 (2)에서 작은 화면 크기에서는 텍스트가 두 번째로 오고 진행률 표시줄이 마지막에 옵니다.

내가 하려는 것은 다음 코드입니다:

으아아아

진행률 표시줄이 있어야 할 위치를 빨간색으로 칠하세요.

문제는 큰 화면에 있을 때 텍스트가 너무 커서 그림과 진행률 표시줄 사이에 흰색 빈 공간이 생겨서 진행률을 누르는 것입니다! 이 화면을 살펴보세요:

Answer 1

이 "부트스트랩을 사용하는 그리드 시스템"(실제로 이는 엄밀히 말하면 그리드 시스템이 아니라 플렉스 시스템)을 구현하는 한 가지 방법은 진행률 표시줄을 코드에 두 번(이미지 뒤에 한 번, 텍스트 뒤에 한 번) 배치하는 것입니다. 디스플레이 유틸리티 클래스(v4 문서, v5 문서)를 사용하여 표시하거나 숨깁니다.

사진 아래에 .d-none.d-md-block，文字下面的应该有.d-block.d-md-nonecode>.
가 있어야 합니다. 다른 중단점에서 교체하려면 md 更改为 sm 或 lg을 변경하세요.
이 요소의 기본 표시를 "flex"에 적용하려면 *-block 替换为 *-flex 클래스를 사용하세요.

실제 작동 모습을 여기에서 확인하세요.

또는 진행률 표시줄 대신 텍스트를 복사하고 동일한 기술을 적용할 수도 있습니다.

---

참고:

• 이 기술의 가장 큰 단점은 반복되는 요소나 그 자손에 이벤트 리스너를 적용/제거하는 것이 지나치게 복잡해진다는 것입니다.
  그러나 일부 프런트엔드 프레임워크(Vue, React)는 기본적으로 대상 요소 내에서 콘텐츠를 렌더링하고 이벤트 손실 없이 컨트롤러 로직을 기반으로 DOM의 다른 위치에 배치할 수 있는 내장 "포털" 구성 요소를 제공합니다. 요소는 파괴되지 않고 이동됩니다.) 내가 아는 한, Angular는 이 기능을 기본적으로 제공하지 않습니다. 하지만 이에 대한 플러그인이 있을 수 있습니다.

• 이 레이아웃은 세 요소가 모두 동일한 상위 요소의 하위 요소인 경우 display: grid 并定义 grid-template-区域（或grid-template-rows和grid-template-columns) 상위 요소에 대한 반응형을 사용하여 사용자 정의 CSS를 사용하여 구현할 수도 있습니다. 그러나 이는 해당 컨테이너에 대한 부트스트랩 그리드 시스템을 포기하고 반응적으로 열 너비를 제어하기 위해 자체 CSS를 작성해야 함을 의미합니다.

• 생성한 스케치에서는 모바일에서 텍스트를 스크롤할 수 있게 하려는지 명확하지 않습니다. 반면 이미지는 상단에 고정되고 진행률 표시줄은 하단에 고정됩니다. 이는 의심할 여지 없이 문제가 있는 사용자 경험을 만들 것입니다. 모바일 장치에서 더 나은 사용자 경험은 전체 페이지를 스크롤 가능하게 만드는 것입니다.

• 잘못된 마크업(HTML): 제목의

  을 너무 일찍 닫았으며 모든 레이아웃을 닫지 않았습니다
  代码正确。原则上，您的 IDE 应该为您突出显示这些内容。最有可能的是，如果您提交此代码用于面试/工作申请，您将因不使用 IDE（或不知道如何设置 - 对于雇主而言，它们的意思是相同的）而立即被取消资格。

• 기타 마크업 문제: 元素内使用

  （反之亦然）；不要将多个段落放在同一个
  元素中，并避免使用
标签；切勿将 .row 放置为另一个 .row 的直接子级（您应该将其包装在 .col 요소 내에

를 사용하지 마세요(또는 그 반대). 동일한

---

요소에 여러 단락을 넣지 마세요. , 그리고


태그를 사용하지 마세요.

.row를 다른 🎜.row의 직계 하위 항목으로 배치하지 마세요. (이를 🎜.col로 묶어야 합니다. ). 그리고 코드가 HMTL 유효성 검사를 통과하는지 확인하세요. 🎜 🎜 🎜 🎜 🎜위에 제공된 예에서 언급된 모든 내용을 수정했습니다. 🎜