使用 CSS 在移动设备上删除 <a> 标签的左边距

Question

我有一些文本包裹在一个 'a' 标签中，有一些左边距。左边距有助于将它与直接位于其左侧（在 desktop/tablets 上）的按钮分开。这适用于 desktop/tablets，但在移动设备上，'a' 标签移动到按钮的右下方，这意味着不再需要 margin-left。如何仅删除移动用户的保证金？或者，更具体地说，当 'a' 标签移动到按钮下方时，如何删除 margin-left？我附上了我正在谈论的一些屏幕截图以及按钮和 '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 'classes' 来自 Bootstrap。 'ml-4' 在左边给元素一些 'rem' 的边距。

手机：

桌面：

Answer 1

Bootstrap 边距类具有断点特定（即屏幕宽度特定）选项，因此您可以仅为桌面设置边距，例如 ml-md-4 where "md"是中等屏幕宽度。根据什么断点强制 a 标记在按钮下换行，您可能必须选择 "sm"、"lg" 等

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

Answer 2

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

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

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

使用 CSS 在移动设备上删除 <a> 标签的左边距

Remove left margin from <a> tag on mobile with CSS

html

css

frontend

responsive-design