Twitter引导不是移动友好 [英] Twitter bootstrap not being mobile friendly

问题描述

所以我正在开发一个前瞻性学习twitter bootstrap，但有一个问题是，网站实际上不是移动友好和看起来不好在大屏幕上。

以下是链接：

  jsfiddle：http：// jsfiddle.net/6LsG7/ 
  

粘性页脚也覆盖了大量的内容。

$ Bootstrap提供了一个类似网格的架构，它允许你在页面中创建段，这样它们就可以正确地排列和堆叠。首先熟悉这一点，然后为每个部分分配正确的类。例如：

col-lg-12将创建一个100％宽的部分。

col-lg-11将创建一个〜90 ％wide

...

col-lg-6将创建一个50％宽的部分

等等。

这样可以创建div或section的正确位置。向可堆叠的每个节添加一个行类。
如果你在这一行里面有两个部分，在每个部分添加一个col-lg-6，并且它们将在移动设备上彼此相邻，并且在每个部分之上。

现在，对于我立即看到的明显问题。

在您的正文标签之间，创建一个包装类div，其中包含您的网页并定义其宽度。

不要使用这么多的定位。特殊位置：固定。这是什么使事情粘性和凌乱。你会使用你的边距，填充，浮动和显示属性来正确对齐的东西。

在给你任何代码之前尝试。我想先看你的大脑工作。然后我们会再拍一些。

So I am working on a prosject learning twitter bootstrap but got into the problem being that the website is not actually mobile friendly and look bad on big screens.

Here is the link:

jsfiddle: http://jsfiddle.net/6LsG7/

The sticky footer also covers alot of the content.

解决方案

Bootstrap comes with a grid-like architecture that will allow you to create sections in your page so that they all line up and stack appropriately. Become familiar with this first and then assign the right classes to each section. For example:

col-lg-12 is will create a section 100% wide.
col-lg-11 will create a section ~90% wide
...

col-lg-6 will create a section 50% wide

and so forth.

So to create the right placement of your divs or sections. add a row class to every section that is stackable. If you are having two sections side-side inside this row, add a col-lg-6 to each and they will line up next to each other and on top of each on mobile.

Now, to the obvious problems that I saw right away.

Between your body tags, create a wrapper class div that will contain your page and define it's width.

Do not use so much positioning. Specially position:fixed. This is what makes things sticky and messy. You wan to make use of your margin, padding, floats, and displays properties to properly align things.

Give it a try before I hand you any code. I want to see your brain work first. Then we'll trouble shoot some more.

这篇关于Twitter引导不是移动友好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！