使用 CSS 从移动设备上的 <a> 标记中删除左边距答案

【问题标题】：Remove left margin from <a> tag on mobile with CSS使用 CSS 从移动设备上的 <a> 标记中删除左边距
【发布时间】：2020-05-09 02:46:26
【问题描述】：

我有一些文本包裹在一个“a”标签中，并带有一些左边距。 margin-left 有助于将其与直接位于其左侧的按钮（在台式机/平板电脑上）分开。这适用于台式机/平板电脑，但在移动设备上，“a”标签在按钮下方移动，这意味着不再需要左边距。如何仅删除移动用户的保证金？或者，更具体地说，当“a”标签在按钮下方移动时，如何删除左边距？我附上了一些我正在谈论的屏幕截图以及按钮和“a”标签的代码。

2 个元素的代码：

<div class="btn-group-one wow fadeInUp" data-wow-delay="500ms" data-wow-duration="1000ms">
    <a class="btn saasbox-btn white-btn mt-3" href="#">WEB APP</a>
    <a class="btn saasbox-btn-2 mt-3 ml-4" href="#">iOS &amp; Android Apps Coming Soon</a>
</div>

*注意：mt-3、ml-4 和 ml-4 “类”来自 Bootstrap。 'ml-4' 在左边给元素一些 'rem' 边距。

手机：

桌面：

【问题讨论】：

标签： html css responsive-design frontend

【解决方案1】：

Bootstrap 边距类具有特定于断点（即特定于屏幕宽度）的选项，因此您可以仅为桌面设置边距，例如ml-md-4 其中“md”是中等屏幕宽度。根据哪个断点强制a 标签包裹在按钮下，您可能必须选择“sm”、“lg”等。

完整文档在https://getbootstrap.com/docs/4.4/utilities/spacing/

【讨论】：

【解决方案2】：

当标签在按钮下方移动时，您可以减小浏览器的宽度并注册宽度大小（以像素为单位）。例如它发生在 300px。

并在您的 a 标签中添加类，例如 mobilemargin 并在您链接的 css 文件中添加以下内容

   @media only screen and (max-width: 300px) {
     .mobilemargin {
       margin-left: 0px;
     }
   }

【讨论】：