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 中，它表明它们各自列的宽度仍然是它们在更大屏幕上的宽度。

Answer 1

您可以通过更改容器的弯曲方向来实现。

flex-direction: column;

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

Answer 2

添加到所有 "col-" class 的填充增加了额外的大小。删除它可以解决所展示的问题。

    [class*="col-"] {
        float: left;
      /*  padding: 15px; This padding adds to the size*/
    }

    /*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%;}
    }

<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 对于小屏幕被 CSS 对于大屏幕覆盖

CSS For Smaller Screens overidden by CSS for Larger Screens

html

css

responsive-design