モバイル上のカスタム Bootstrap 5 カルーセル (複数の項目、ただし 1 行ではない)
<p>モバイル デバイスでカルーセル レイアウトをカスタマイズしようとすると問題が発生します。
モバイルでカルーセルの項目を 1 つだけではなくすべて表示したいのですが、いくつかの CSS と JS、具体的には <code>display</code> <code>float< /code> または <code> を使用して試した後、 max-witdh</code> これは不可能だと思い始めたか、どこを見るべきかわかりません/間違った場所/属性を調べます。
私が何を達成しようとしているのかがわかるように、2 つの画像を含めました。 </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="カルーセルインナー">
<div class="カルーセル項目アクティブ">
<a href="#" class="img-link"><img src="./img.png" alt=""></a>
<a href="#">テキスト</a>
</div>
<div class="カルーセルアイテム">
<a href="#" class="img-link"><img src="./img.png" alt=""></a>
<a href="#">テキスト</a>
</div>
<div class="カルーセル項目アクティブ">
<a href="#" class="img-link"><img src="./img.png" alt=""></a>
<a href="#">テキスト</a>
</div>
<div class="カルーセル項目アクティブ">
<a href="#" class="img-link"><img src="./img.png" alt=""></a>
<a href="#">テキスト</a>
</div>
<div class="カルーセル項目アクティブ">
<a href="#" class="img-link"><img src="./img.png" alt=""></a>
<a href="#">テキスト</a>
</div>
<div class="カルーセルインジケーター">
<ボタンの種類=「ボタン」 data-bs-target="#solutions-carousel" data-bs-slide-to="0"クラス= "アクティブ" aria-current="true" aria-label="スライド 1"></button>
<ボタンの種類=「ボタン」 data-bs-target="#solutions-carousel" data-bs-slide-to="1" aria-label="スライド 2"></button>
<ボタンの種類=「ボタン」 data-bs-target="#solutions-carousel" data-bs-slide-to="2" aria-label="スライド 3"></button>
<ボタンの種類=「ボタン」 data-bs-target="#solutions-carousel" data-bs-slide-to="3" aria-label="スライド 3"></button>
<ボタンの種類=「ボタン」 data-bs-target="#solutions-carousel" data-bs-slide-to="4" aria-label="スライド 3"></button>
</div></pre>
<p>何か素敵な方法はありますか？ドライカップ（そして、砂糖を表す英語の意味を表します）。
