响应式设计不适用于移动设备

Question

这是我尝试过的代码，但在移动视图中尤其无效

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="col-sm-4">
  <div class="product_body">
    <div class="prod_image">

      <img src="images/product/1.png">
    </div>
    <div class="prod_details">
      <h4>Teddy bear</h4>
      <div class="row">
        <div class="col-xs-12 col-md-6 prod_price">
          RS 333

        </div>
        <div class="col-xs-12 col-md-6 prod_offer">
          88% OFF

        </div>

      </div>

    </div>
  </div>
</div>

Answer 1

如果我理解正确，您需要在col-sm-4 之前添加<div class="row"。

编辑：从您的屏幕截图中，我没有看到您需要的容器。也许它已经包含在内，但我看不到它。 你需要有<div class="container"> <div class="row"> <div class="col-sm-4">

先尝试删除其他 div，看看是否能解决您的问题，然后再添加其他 div。