为什么我的引导页面不适合移动设备？答案

【问题标题】：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/。它是一个静态网站。

我该如何解决？

【问题讨论】：

【解决方案1】：

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

【讨论】：

它看起来仍然像所有卡片都粘在屏幕的右边缘并且只显示左边距\
@Nateshbhat，你已经在行中设置了一个宽度，<div class="card m-5 hoverable projectCard" style="width: 22rem;">，我认为它没有做出响应，尝试使用媒体查询在移动设备中删除 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">

它回答了你的问题吗？

【讨论】：