用CSS从移动<a>标签中删除左边框

Question

我有一些文字包装在'a‘标签与一些空白-左。左边框有助于将其与左边的按钮(在桌面/平板电脑上)分开。这对于桌面/平板电脑来说很好，但是在移动平台上，“a”标签就在按钮下面移动，这意味着不再需要左边框了。如何删除仅适用于移动用户的保证金？或者，更具体地说，当'a‘标签移动到按钮下面时，如何删除左边的边距？我附上了一些屏幕截图，我说的是，按钮和'a‘标签的代码。

这两个元素的代码：

<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‘类来自靴带。“ml4”给元素在左边的一些“rem”边距。

移动：

​

​

桌面：

​

​

Answer 1

引导边距类有特定于断点的(即屏幕宽度特定的)选项，因此您可以只为桌面设置边距，例如ml-md-4，其中"md“是中等屏幕宽度。取决于哪个断点强制a标记在按钮下面包装，您可能不得不选择"sm“、"lg”等。

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

Answer 2

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

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

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