【问题标题】:why is my bootstrap page here not mobile friendly?为什么我的引导页面不适合移动设备?
【发布时间】:2018-12-30 14:40:49
【问题描述】:

我的网站托管在“nateshmbhat.github.io”。我已经为我的 dom 使用了 mdboostrp 的 row 和 col。但它不适合移动设备(显示大量背景空间)。

网站:https://nateshmbhat.github.io/。 它是一个静态网站。

我该如何解决?

网站代码:https://github.com/nateshmbhat/nateshmbhat.github.io

【问题讨论】:

  • 请留下一些关于否决票的评论。
  • 我没有投反对票,但您可以提供有关您的问题/您所做的事情的更多详细信息,并在此处向我们展示一些特定代码,以获得更准确的答案。

标签: css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 mdbootstrap


【解决方案1】:

将此标签添加到头部: <meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】:

  • 它看起来仍然像所有卡片都粘在屏幕的右边缘并且只显示左边距\
  • @Nateshbhat,你已经在行中设置了一个宽度,&lt;div class="card m-5 hoverable projectCard" style="width: 22rem;"&gt;,我认为它没有做出响应,尝试使用媒体查询在移动设备中删除 width: 22rem 等等你可以得到移动响应..
【解决方案2】:

您的卡片似乎使用了“m-5”类。

<div class="card m-5 hoverable projectCard" style="width: 22rem;">

如果您希望他们使用 boostrap 做出响应,则该类是“col-md-5”。

<div class="card col-md-5 hoverable projectCard">

它回答了你的问题吗?

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-03-22
  • 2020-03-29
  • 1970-01-01
  • 2017-05-31
  • 2015-07-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多