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 это выглядит немного искаженным.

s5 отзывчивый

Я хочу, чтобы кнопка корзины была в одном ряду, как на первом рисунке.

Я использую bootstrap и использую 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;
}

для приведенного выше столбца я использую float-right и ожидаю очень маленькое расстояние между ценой и кнопкой мусора. Я тоже не могу этого достичь.

Не могли бы вы дать мне несколько советов?

Всего 1 ответ


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

Bootstrap 4 не имеет хз сетки. Вы должны изменить col-xs-6 на col-6, но если вы хотите иметь другую сетку в версиях для ПК или планшета, вы можете использовать размер lg и md.


Есть идеи?

10000