【问题标题】:Twitter bootstrap not being mobile friendlyTwitter bootstrap 对移动设备不友好
【发布时间】:2014-03-07 00:40:05
【问题描述】:
所以我正在研究一个学习 twitter 引导程序的项目,但遇到的问题是该网站实际上并不适合移动设备并且在大屏幕上看起来很糟糕。
这里是链接:
jsfiddle: http://jsfiddle.net/6LsG7/
粘性页脚还涵盖了很多内容。
【问题讨论】:
标签:
html
css
twitter-bootstrap
【解决方案1】:
您似乎没有使用引导程序提供的任何类。相反,您正在创建自己的 ID? Bootstrap 具有使用“容器”、“导航”、“列”等类的结构化框架。
要获得响应式设计,您必须遵守预先提供的类。我是否建议您查看 WYSIWYG 引导布局制造商,例如 LayoutIt。
【解决方案2】:
Bootstrap 带有类似网格的架构,可让您在页面中创建部分,以便它们全部排列并适当堆叠。首先熟悉这一点,然后为每个部分分配正确的类。例如:
col-lg-12 将创建一个 100% 宽的部分。
col-lg-11 将创建一个 ~90% 宽的部分
...
col-lg-6 将创建一个 50% 宽的部分
等等。
所以要为您的 div 或部分创建正确的位置。为每个可堆叠的部分添加一个行类。
如果您在这一行中有两个部分,请在每个部分添加一个 col-lg-6,它们将彼此相邻并在移动设备上排列在每个部分的顶部。
现在,我马上就看到了明显的问题。
在你的 body 标签之间,创建一个包装类 div 来包含你的页面并定义它的宽度。
不要使用太多的定位。特别位置:固定。这就是使事情变得粘稠和混乱的原因。您可以利用边距、内边距、浮动和显示属性来正确对齐。
在我给你任何代码之前先试一试。我想先看看你的大脑工作。那我们再找麻烦。