모바일의 사용자 정의 Bootstrap 5 캐러셀(여러 항목이지만 한 행에 있지 않음)
P粉763662390
2023-09-05 11:53:56
<p>모바일 기기에서 캐러셀 레이아웃을 맞춤설정하는 데 문제가 있습니다.
모바일에서는 캐러셀의 모든 항목을 표시하고 싶지만, 특히 <code>display</code> 또는 <code> max-witdh</code> 이것이 불가능하다고 생각하기 시작했거나 잘못된 위치/속성을 어디에서 보거나 봐야할지 모르겠습니다.
내가 달성하려는 것이 무엇인지 볼 수 있도록 두 장의 사진을 포함했습니다. </p>
<p>내가 이루고 싶은 것:
</p>
<p>내가 가진 것:
</p>
<p>샘플 HTML 코드는 매우 기본적입니다. 이는 단지 디자인 목적을 위한 것이므로 CSS를 포함하지 않습니다. </p>
<pre class="brush:php;toolbar:false;"><div id="solutions-carousel" class="회전식 슬라이드 d-block d-md-none">
<div class="carousel-inner">
<div class="캐러셀 항목 활성">
<a href="#" 클래스="img-link"<img src="./img.png"alt=""</a>
<a href="#">텍스트</a>
</div>
<div class="carousel-item">
<a href="#" 클래스="img-link"<img src="./img.png"alt=""</a>
<a href="#">텍스트</a>
</div>
<div class="캐러셀 항목 활성">
<a href="#" 클래스="img-link"<img src="./img.png"alt=""</a>
<a href="#">텍스트</a>
</div>
<div class="캐러셀 항목 활성">
<a href="#" 클래스="img-link"<img src="./img.png"alt=""</a>
<a href="#">텍스트</a>
</div>
<div class="캐러셀 항목 활성">
<a href="#" 클래스="img-link">img src="./img.png"alt="></a>
<a href="#">텍스트</a>
</div>
<div class="캐러셀 표시기">
<버튼 유형="버튼" data-bs-target="#solutions-carousel" 데이터-bs-슬라이드-to="0" 클래스="활성" 아리아-현재="true" aria-label="슬라이드 1"></button>
<버튼 유형="버튼" data-bs-target="#solutions-carousel" 데이터-bs-슬라이드-to="1" aria-label="슬라이드 2"></button>
<버튼 유형="버튼" data-bs-target="#solutions-carousel" 데이터-bs-슬라이드-to="2" aria-label="슬라이드 3"></button>
<버튼 유형="버튼" data-bs-target="#solutions-carousel" 데이터-bs-슬라이드-to="3" aria-label="슬라이드 3"></button>
<버튼 유형="버튼" data-bs-target="#solutions-carousel" 데이터-bs-슬라이드-to="4" aria-label="슬라이드 3"></button>
<p>유什么想법이 있습니까?
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이전에 비슷한 질문이나 사례에 대한 답변이 다른 스레드에서 있었던 것 같아요. 귀하에게 도움이 될 수 있는 몇 가지 참고 자료를 찾았으며 몇 가지 링크를 제공하겠습니다. 스택오버플로우의 또 다른 스레드
다음 JS 코드를 사용할 수도 있습니다:
으아악면책 조항: 이 답변/코드 조각은 내 것이 아닙니다. 모리스 멜처스에게서 받았습니다 https://codepen.io/mephysto/pen/ZYVKRY