【问题标题】:Regarding responsiveness of websites to small screens关于网站对小屏幕的响应
【发布时间】:2017-10-15 17:52:28
【问题描述】:

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

【问题讨论】:

  • 这个问题对代码审查社区来说会更好,您可以在其中发布网站代码并要求更正响应性。在那里你可以得到一些更好的建议。

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


【解决方案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 有许多类可供您使用,但需要深入挖掘。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-19
    • 1970-01-01
    • 2021-04-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多