CSS 对特定范围没有反应

Question

这里是新手，但我确实在这里浏览了很多论坛，但似乎找不到解决方案。

我正在尝试制作三个并响应 3 个不同尺寸的屏幕。较小的 (col-md) 和较大的 (col-lg) 有效但中间的 (col -md)

我不知道我错过了什么，但中间那个不起作用，如果有任何解决方案，请告诉我.. 在 html 文件中，

<div class="style col-lg-4 col-md-6 col-sd-12">
        <div class="boxtitle">
        Chicken
        </div>
        <div>
            <p>
            SOME TEXT HERE</p>
        </div>
    </div>

    <div class="style col-lg-4 col-md-6 col-sd-12">
        <div class="boxtitle">
        </div>
        <div>
            <p>
            SOME TEXT HERE
            </p>
        </div>
    </div>

    <div class="style col-lg-4 col-md-12 col-sd-12">

        <div class="boxtitle">
        Sushi
        </div>
        <div>
            <p>
                SOME TEXT HERE
        </p>
    </div>
<div>

在 CSS 文件中，

@media (max-width: 767px) {
  .col-sd-12 {
    width: 100%;
    float: left;
  }
}


@media (min-width: 768px) and (max-width: 991px) {
    .col-md-6, .col-md-12 {
    float: left;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-12 {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg-4 {
    width: 33%;
    float: left;
  } 
}

Answer 1

您输入的是 col-sd-12，我想您的意思是 col-sm-12？

Answer 2

在您的代码示例中存在一些语法错误：第二个块中未关闭的 .boxtitle 和最后一个 .style 块中未关闭的。如果修复了这些错误，则代码可以正常工作并且没有问题

Answer 3

.style:nth-child(1) {
  background-color: #bbb;
}

.style:nth-child(2) {
  background-color: #666;
}

.style:nth-child(3) {
  background-color: #999;
}

@media (max-width: 767px) {
  .col-sd-12 {
    width: 100%;
    float: left;
  }
}


@media (min-width: 768px) and (max-width: 991px) {
    .col-md-6, .col-md-12 {
    float: left;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-12 {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg-4 {
    width: 33%;
    float: left;
  } 
}

<div class="style col-lg-4 col-md-6 col-sd-12">
   <div class="boxtitle">
      Chicken
   </div>
   <div>
      <p>
         SOME TEXT HERE
      </p>
    </div>
</div>

<div class="style col-lg-4 col-md-6 col-sd-12">
   <div class="boxtitle">
     Pizza
   </div>
   <div>
      <p>
         SOME TEXT HERE
       </p>
    </div>
</div>

<div class="style col-lg-4 col-md-12 col-sd-12">

  <div class="boxtitle">
     Sushi 
  </div>
  <div>
    <p>
       SOME TEXT HERE
    </p>
  </div>
</div>

也请关闭您的最后一个<div class="style col-lg-4 col-md-12 col-sd-12">。

你最大的错误是你没有在第二个 div 关闭 div class="boxtitle，这造成了所有问题

CSS 对特定范围没有反应

CSS not responsive to certain range

html

css

responsive-design

web