关于网站对小屏幕的响应

Question

这是我的第一个网站，我的投资组合的 URL https://sarthak-port.000webhostapp.com/Mportfolio.html 我使用 webhost 进行免费托管。我的问题是我确实在代码中使用了引导类，但我的页面不能完全响应小屏幕。你们能否提出一些想法来做同样的事情。

Answer 1

稍微看一下，您在“我的作品”空间和“我的个人资料”空间中使用的每个元素只使用 col-xs-3 类。如果您希望您的部分在响应式问题中重新排列，您可能应该使用像

这样的类

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

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

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

这样您可以将输入发送到中心（3 个网格单元为空+6 个网格单元为您的输入，3 个网格单元再次为空） 否则你可以使用类似Twitter Bootstrap 3: How to center a block 的东西。 Bootstrap 有许多类可供您使用，但需要深入挖掘。