css - 向 container-fluid 添加 padding 以确保每个设备从左到右具有相同的空间是否好？

Question

我后来创建了一个页面，我才知道该页面没有响应。

现在正在重新创建页面，犹豫是否要用
container 或 container-fluid 我读过一些使用
的博客 container-fluid 会很好，所以我正在使用 container-fluid。

但是我没有从左边和右边获得空间所以我可以使用填充
: 两侧 80 PX 会影响其他吗
设备(笔记本电脑、平板电脑、手机)？

Answer 1

container-fluid 在所有设备上表示宽度:100%。

但通过在两侧添加 padding 80px，网站在台式机、笔记本电脑或平板电脑上看起来会很好。

但在小型设备上，您将在两侧浪费 80 + 80px 空间。

因此内容在移动设备上会被压缩。

解决方案是使用媒体查询删除小型设备上的 80px 填充 或者您可以使用 container 而不是 fluid，其中会自动处理此间距

例如

    .container-padding{
     padding-left:80px;
     padding-right:80px;
    }

    @media(max-width:767px){ /*for mobile phone */
     .container-padding{
      padding:15px;/*little padding to your content so that it doesnt stick to the sides*/
     }
    }