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

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

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

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

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