当cold-*-* 存在时，Bootstrap col-* 不起作用，但它应该是默认值答案

【问题标题】：Bootsrap col-* does not work when col-*-* present, but it should be the default当cold-*-* 存在时，Bootstrap col-* 不起作用，但它应该是默认值
【发布时间】：2019-01-25 13:11:47
【问题描述】：

编辑：它适用于新版本的 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。

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

对于 xs 设备，如何使我的列宽 6？

【问题讨论】：

你能发布一个可重现的例子吗？
col-6 col-md-12 应该可以工作，我每天都这样做
请提供代码，因为你肯定做错了什么
你是否包含了 boostrap 4，你可能保留了 3？
您需要提供minimal reproducible example 而不仅仅是您的代码描述。

标签： html css bootstrap-4

【解决方案1】：

导致问题的原因是 Chrome 响应式视图。如屏幕截图所示，无论您调整它的大小，所有元素的计算宽度都是 980 像素。

如果我不在开发选项中使用响应式视图并调整实际浏览器窗口的大小，它可以工作。

PS：我几乎失去了理智，我猜这是一个错误。

【讨论】：