Ionic 输入组在较小屏幕尺寸上显示不正确

llycmphe  于 2023-03-06  发布在  Ionic
关注(0)|答案(1)|浏览(145)

我试着用

设计一个购物车页面,它在普通屏幕上也能正常工作,但是在小屏幕上(特别是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,但是没有用

6yjfywim

6yjfywim1#

有几种方法可以解决这个问题,我将使用d-flex如下,

<div class="d-flex flex-wrap">
  <div class="d-flex" style="max-width: 110px;">
    <button class="btn btn-primary">-</button>
    <input type="text" class="form-control text-center" placeholder="1" />
    <button class="btn btn-primary">+</button>
  </div>

  <div>
    <span class="input-group-text">81 sản phẩm có sẵn</span>
  </div>
</div>

这个概念是
1.使用主d-flex flex-wrap父容器,以便input-group-text在不适合该容器时将转到底部
1.使用带有max-widthd-flex内部容器 Package **(+/-)**按钮和数字输入
完整的"灵活行为"在这里
希望它有帮助,并快乐编码!

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<div class="card m-3">
  <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="card">
    
    <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 border"
          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="d-flex flex-wrap">
              <div 
                class="d-flex"
                style="max-width: 120px;"
              >
                <button class="btn btn-primary">-</button>
                <input
                  type="text"
                  class="form-control text-center"
                  placeholder="1"
                />
                <button class="btn btn-primary">+</button>
              </div>

              <div>
                <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="" 
              class="border" 
              style="width: 20px; height: 20px" 
            />
          </div>
        </div>
      </div>
    </div>
    
    </div>
    
  </div>
</div>

相关问题