html - 小屏幕的 CSS 被大屏幕的 CSS 覆盖

Question

我正在尝试使用响应式网格视图来显示三个项目：

<div class="row">
    <div class="col-6">Object 1</div>
    <div class="col-3">Object 1</div>
    <div class="col-3">Object 1</div>
</div>

彼此相邻，如果用户的屏幕太小，无法使用这段 css 将三个项目放在彼此下方：

    [class*="col-"] {
        float: left;
        padding: 15px;
    }

    /* For mobile phones: */
    [class*="col-"] {
      width: 100%;
    }

    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    @media only screen and (min-width: 992px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
    }

但是，当我将屏幕缩小时，我的三个对象只是聚集在一起，并且在 chrome 中它显示它们各自列的宽度仍然是它们对于更大屏幕的宽度。

标签： htmlcssresponsive-design

Answer 1

您可以通过更改容器的弯曲方向来做到这一点。

flex-direction: column;

编辑： 使用 flexbox 的工作示例参见https://jsfiddle.net/4bc2kqLm/