我试着用
设计一个购物车页面,它在普通屏幕上也能正常工作,但是在小屏幕上(特别是Iphone SE),数量菜单变成了
,我该怎么缩小它呢?
代码:
<ion-view>
<ion-content>
<h1 class="text-center">Cart</h1>
<div class="container">
<div class="row text-center">
<div class="col-6">Tất cả</div>
<div class="col-6">Đã mua</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-2 input-group text-center">
<input type="checkbox" class="form-check-input margin-auto" />
</div>
<div class="col-3 text-center">
<img
src="scripts\cart\placeholder.png"
class="img-fluid"
style="height: fit-content; width: fit-content"
alt=""
/>
</div>
<div class="col-7">
<div class="row">
<div class="col-8">
<div class="row">
<p>Tên dòng xe</p>
</div>
<div class="row">
<p>Phân loại: Màu sắc</p>
</div>
<label for="price" class="">Giá tiền</label>
<div class="row">
<div
class="input-group-append mw-50"
style="width: 20px; height: max-content"
>
<button class="btn btn-primary">-</button>
<input
type="text"
class="form-control text-center"
placeholder="1"
/>
<button class="btn btn-primary">+</button>
<span class="input-group-text">81 sản phẩm có sẵn</span>
</div>
</div>
</div>
<div class="col-4">
<img src="scripts\cart\trashbin.png" width="50" alt="" />
</div>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
一开始这个页面看起来像
,然后我在数量菜单中添加了append,但是没有用
1条答案
按热度按时间6yjfywim1#
有几种方法可以解决这个问题,我将使用
d-flex
如下,这个概念是
1.使用主
d-flex flex-wrap
父容器,以便input-group-text
在不适合该容器时将转到底部1.使用带有
max-width
的d-flex
内部容器 Package **(+/-)**按钮和数字输入完整的"灵活行为"在这里
希望它有帮助,并快乐编码!