当出现col-*-*时，Bootsrap 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>

Screenshot small Device

如果我仅设置“ col-6”，则可以使用。

如果我执行“ col-6 col-sm-6 col-md-12”，则它将达到12列宽，直到sm的断点为止，然后为6列，并在到达md的断点时返回到12。 / p>

“ col-xs- *”不再适用于bootsrap 4。

如何使xs设备的列宽为6？

Answer 1

是Chrome响应式视图导致了问题。从屏幕截图中可以看出，无论您调整大小如何，所有元素的计算宽度均为980px。

如果我不使用dev选项中的响应视图并调整实际浏览器窗口的大小，则它会起作用。

PS：我对这个错误几乎不知所措。