Я реализовал контейнер таким образом, что на очень маленьком экране ему должна быть назначена ширина.
<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 это выглядит немного искаженным.
Я хочу, чтобы кнопка tra sh была в такой же ряд, как на первом рисунке.
Я использую bootstrap и использую class = "col-xs-X", чтобы разделить столбцы на маленьких экранах. Почему его не работает для устройства S5?
Вторая проблема:
<div class="col-xs-1 float-right">
40€
</div>
my css
.glyphicon.glyphicon-trash{
font-size: 10px;
top: -6px;
}
.btntrash{
height:20px;
top: -6px;
}
для вышеприведенного столбца. Я использую float-right и ожидаю очень маленькое расстояние между ценой и кнопка tra sh. Я тоже не могу этого достичь.
Не могли бы вы дать мне несколько советов?