Bootsrap col- * не работает, когда col - * - * присутствует, но он должен быть по умолчанию

Question

РЕДАКТИРОВАТЬ: он работает с новой версией Bootstrap, по крайней мере, для меня

Я работаю над веб-страницей с Boostrap 4. Насколько я знаю, col-xs- * устарел с 4.0 ипо умолчанию для 0px up теперь col- *.Я установил «col-6 col-md-12», но его ширина всегда 12 столбцов.

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">


<div class="container-fluid" style="height: 100%">
  <div class="row trenner">
    <div class="col-6 col-md-12 logout">
      <button class="logout"><i class="fa fa-sign-out-alt"></i><label class="btnLbl">Abmelden</label></button>
    </div>
    <div class="col-6 text-right wagenMobil">
      <ul id="drop-dummy">
        <button id="wagen-button"><i class="fas fa-shopping-cart"></i></button>
      </ul>
    </div>
  </div>

Снимок экрана маленькое устройство

Если я установлю только "col-6", это будет работать.

Если ясделайте "col-6 col-sm-6 col-md-12", он будет иметь ширину 12 столбцов до точки останова для sm, затем его 6 и возвращается к 12, когда достигается точка останова для md.

"col-xs- *" больше не работает с bootsrap 4.

Как мне получить ширину моей колонки 6 для устройств xs?

Answer 1

Проблема была вызвана отзывчивостью Chromes.Как видно на скриншоте, все элементы имеют расчетную ширину 980 пикселей независимо от того, насколько вы их изменили.

Если я не использую адаптивный вид в настройках dev и изменяю размер фактического окна браузера, это работает.

PS: чуть не сошел с ума из-за этого, что я думаю, это ошибка.