bootstrap div在移动设备中没有正确堆叠

时间:2016-09-28 01:29:21

标签: jquery html5 css3 twitter-bootstrap-3 media-queries

如果可能的话,我有2个问题需要帮助。

  1. 我使用bootstrap为我的一个朋友创建一个响应式网站。我是新手,因为我一直在使用bootstrap,我看到它根据屏幕大小自动堆叠div(移动视图中的I.E.)。我遇到的问题是,无论出于何种原因,bootstrap将最后几个div叠加在一起。我认为我可能忘记关闭标签,但我一直在仔细检查代码,似乎无法找到任何打开的标签。我还删除了我的任何自定义CSS,看看是否会导致问题,这也没有帮助。任何想法的家伙?

  2. 我还使用backstretch将图像添加到第一个div的背景中,以及页面上的幻灯片显示,无论出于什么原因,它都会调整图像的大小,使其对于容器来说太大了in,导致图像被切断。获得正确格式化的任何帮助?

  3. 我确定格式化问题是我错过的傻事,非常感谢任何帮助!

    http://evlands.com/EV.html

    即该网站的链接。一切都是试探性的,我们正在等待他的工作的一些专业。对网站的任何建议也表示赞赏

3 个答案:

答案 0 :(得分:0)

初看起来,您将覆盖宽度和高度的框架行类。

尝试并保持行独立,如果你使用行col结构的类,只能用于样式和内部div内容。

一旦你开始与内置网格战斗,它就可以快速下坡。

答案 1 :(得分:0)

在没有看到所有代码的情况下,从您的网站判断,看起来您有一些绝对的div,它们没有占用您希望它们在页面调整大小时的空间。

如果您想在不依赖引导程序的情况下自行修复其中的一些内容。看看media queries。您可以指定特定屏幕尺寸的某些属性

答案 2 :(得分:0)

我查看了页面的视图源,我看到你在div中有md大小的col类 - 例如class =“col-md-4”,这只适用于中等大小的设备。如果您将浏览器尺寸缩小 - 您还需要在div中为小尺寸设备添加类。示例类“col-md-4 col-sm-4 col-xs-4” - 您需要决定其他设备的列大小 - 小屏幕和x小,这样当您使页面变小时,col-sm将使用-4 / col-xs-4 - 见下面的例子

<div class="col-md-4 col-sm-4 col-xs-4">          
  <p></p>
</div>

有关详细信息,请查看此链接on grid and media queries 希望这有帮助。