먼저 이 그림의 아이디어를 보여드리겠습니다. 그림 (1) 이 그림에서 우리는 md/lg 화면에서 진행률 표시줄이 그림 아래에 있고 텍스트가 그림 오른쪽에 있는 것을 볼 수 있습니다.
그림 (2)에서 작은 화면 크기에서는 텍스트가 두 번째로 오고 진행률 표시줄이 마지막에 옵니다.
내가 하려는 것은 다음 코드입니다:
으아아아진행률 표시줄이 있어야 할 위치를 빨간색으로 칠하세요.
문제는 큰 화면에 있을 때 텍스트가 너무 커서 그림과 진행률 표시줄 사이에 흰색 빈 공간이 생겨서 진행률을 누르는 것입니다! 이 화면을 살펴보세요:
P粉5187995572023-09-15 00:28:55
이 "부트스트랩을 사용하는 그리드 시스템"(실제로 이는 엄밀히 말하면 그리드 시스템이 아니라 플렉스 시스템)을 구현하는 한 가지 방법은 진행률 표시줄을 코드에 두 번(이미지 뒤에 한 번, 텍스트 뒤에 한 번) 배치하는 것입니다. 디스플레이 유틸리티 클래스(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): 제목의 기타 마크업 문제: 을 너무 일찍 닫았으며 모든 레이아웃을 닫지 않았습니다
（反之亦然）；不要将多个段落放在同一个 元素中，并避免使用 .row 放置为另一个 .row 的直接子级（您应该将其包装在 .col
요소에 여러 단락을 넣지 마세요. , 그리고
태그를 사용하지 마세요. 회신하다0