Bootstrap 4：超小屏幕上的响应式布局答案

【问题标题】：Bootstrap 4: Responsive layout on extra small screenBootstrap 4：超小屏幕上的响应式布局
【发布时间】：2020-05-03 04:08:33
【问题描述】：

我已经以这样一种方式实现了一个容器，即在超小屏幕上它们应该指定宽度。

 <div class="container w-60 border border-secondary">
                <h1 class="text-black-50 text-center mb-5 bg bg-light">Warenkorb</h1>  
            <hr/>
            <div class="row mt-5">
                <div class="col-xs-1">
                    <span>1x</span>
                </div>
                <div class="col-xs-6">
                    <small class="text-muted description">Some description</small>
                </div>
                <div class="col-xs-2">
                    <div class="btn-group" role="group" aria-label="quantity">
                        <button type="button" class="btn btn-default border border-success btn-sm align-bottom float-right" (click)="decreaseTheQuantity(item)"><span class="vertical-align: baseline;">-</span></button>
                        <button type="button" class="btn btn-default border border-success btn-sm align-bottom  float-right" (click)="increaseTheQuantity(item)"><span class="vertical-align: baseline;">+</span></button>
                      </div>
                </div>
                <div class="col-xs-1 float-right">
                   40€
                </div>
                <div class="col-xs-2">
                    <button type="button" class="btn btn-default btn-sm float-right" (click)="deleteTheItem(i)">
                        <span class="glyphicon glyphicon-trash  border border-success btn-sm align-top float-right btntrash"></span>  
                      </button>
                </div>
            </div>

在大多数屏幕上看起来都不错

但在 s5 上看起来有点失真。

我希望垃圾桶按钮与第一张图片一样位于同一行。

我正在使用引导程序并使用 class="col-xs-X" 在小屏幕上拆分列。为什么它不适用于 s5 设备？

第二个问题是：

 <div class="col-xs-1 float-right">
               40€
 </div>

我的 CSS

.glyphicon.glyphicon-trash{
    font-size: 10px;
    top: -6px;
}

.btntrash{
    height:20px;
    top: -6px;
}

对于上面的列，我正在使用浮动右侧，并且希望价格和垃圾按钮之间的空间很小。我也无法做到这一点。

你能给我一些指点吗？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap 4 没有 xs 网格。您应该将 col-xs-6 更改为 col-6，但如果您想在台式机或平板电脑版本上使用不同的网格，您可以使用 lg 和 md 大小。

【讨论】：

我试过了，但仍然在较小的设备上，垃圾按钮出现在下一行。
不是最佳解决方案，但将 col-1 更改为 col-2 并将 col-6 更改为 col-4。文本会换行，但您可以使用 font-size 进行操作。

【解决方案2】：

聚会有点晚了，但我建议使用col-auto 和col 来调整小屏幕的布局。我发现在某些情况下，当列的内容不适合它的宽度时（就像你所做的那样），指定总共 12 列会以奇怪的方式做出反应。

并且还利用引导程序中可用的断点来更改不同屏幕的列大小。

<div class="row mt-5">
  <div class="col-auto col-sm-1">
    <!-- Quantity -->
  </div>
  <div class="col col-sm-6">
    <!-- Description -->
  </div>
  <div class="col-auto col-sm-2">
    <!-- Plus/Minus buttons -->
  </div>
  <div class="col-auto col-sm-1 float-right">
     <!-- Price -->
  </div>
  <div class="col-auto col-sm-2">
     <!-- Delete Button -->
  </div>
</div>

col-auto 用于根据其内容调整列的大小。

col 用于填充行中剩余的空间。

【讨论】：