关于网站对小屏幕的响应性

时间:2017-10-15 09:35:37

标签: html css responsive-design bootstrap-4 responsive

这是我的第一个网站,我的投资组合的网址Forge SVF Extractor in Node.js 我已经使用webhost进行免费托管。我的问题是我在我的代码中使用了bootstrap类,但我的页面并没有完全响应小屏幕。你们可以提出一些想法来做同样的事情。

1 个答案:

答案 0 :(得分:1)

从观看它有点你在空间“我的作品”和空间我的个人资料只使用col-xs-3为每个元素。如果您希望您的部分重新排列在响应式内容中,您应该使用类似

的类
class="col-lg-3 col-md-3 col-sm-6 col-xs-12"

这样,在较大的屏幕宽度中,每行应该有4个4个元素,然后在较小的屏幕宽度中每行只有2个元素,最后在非常小的屏幕中每行只有1个元素。通过将所有元素设置为col-xs-3,您需要在所有屏幕的每一行中使用四个元素。 此外,对于最后一节,您的输入字段不使用bootstrap类设置为middle。一种方法是使用

col-md-6 col-md-3-offset

通过这种方式,您可以将输入发送到中心(3个网格单元格空白+ 6个网格单元格,输入和3个网格单元格再次空白) 否则你可以使用类似Twitter Bootstrap 3: How to center a block之类的东西。 Bootstrap有许多可以使用的类,但需要进行一些挖掘。