【问题标题】:Responsive design not working on mobile响应式设计不适用于移动设备
【发布时间】:2018-09-20 22:48:52
【问题描述】:

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

<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>

【问题讨论】:

  • Bootstrap 不是火箭科学!我建议你阅读如何使用引导程序here
  • 你能说一下到底是什么问题吗?

标签: html css twitter-bootstrap


【解决方案1】:

如果我理解正确,您需要在col-sm-4 之前添加&lt;div class="row"

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

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

【讨论】:

  • 你能给个屏幕截图吗?
  • col-xs-6 之前使用的行元素在移动视图上变得狂野,我有一个屏幕截图但不知道如何用图像回复
  • 请检查我现在上传的图片
  • 没有图片
  • div 的结构完全错误。让我编辑我的问题
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-10-25
  • 1970-01-01
相关资源
最近更新 更多