css - Bootstrap 4：超小屏幕上的响应式布局

问题描述

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

 <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;
}

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

你能给我一些指点吗？

标签： csstwitter-bootstrap

css - Bootstrap 4：超小屏幕上的响应式布局

问题描述

解决方案

推荐阅读