Html 如何使用Bootstrap 3删除链接之间的间距？

我正在尝试为一个应用程序的web视图重新创建4个“按钮”，这些按钮是静态的，并且仅在移动视图上处于固定位置。他们的想法是，他们占据了100%的屏幕宽度，使它看起来像一个本地应用程序

然而，每个元素之间似乎都有间隔，我不知道如何去除它。如果我将框的宽度设置为24%，它们将适合一行，但具有间距。如果是25%，那么我在一行得到3，在下面的另一行得到4

CSS:

代码是RoR，但本质上是正常的链接。 代码：

---

您是否尝试过创建一个按钮组，而不是尝试单独处理它们？也许你可以试试这样：

<div class="btn-group btn-group-justified">
  <%= link_to "Box 1", "#", class: "btn btn-default", id: "mobileButton"%>
  <%= link_to "Box 2", "#", class: "btn btn-default", id: "mobileButton" %>
  <%= link_to "Box 3", "#", class: "btn btn-default", id: "mobileButton" %>
  <%= link_to "Box 4", "#", class: "btn btn-default", id: "mobileButton" %>
</div>

我会说，按钮本身不是我通常制作它们的方式，它们也有相同的ID，这不好。相反，我建议做一些事情，例如：

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary" id="mobileButton1">Box 1</a>
  <a href="#" class="btn btn-primary" id="mobileButton2">Box 2</a>
  <a href="#" class="btn btn-primary" id="mobileButton3">Box 3</a>
  <a href="#" class="btn btn-primary" id="mobileButton4">Box 4</a>
</div>

---

您是否尝试过创建一个按钮组，而不是尝试单独处理它们？也许你可以试试这样：

<div class="btn-group btn-group-justified">
  <%= link_to "Box 1", "#", class: "btn btn-default", id: "mobileButton"%>
  <%= link_to "Box 2", "#", class: "btn btn-default", id: "mobileButton" %>
  <%= link_to "Box 3", "#", class: "btn btn-default", id: "mobileButton" %>
  <%= link_to "Box 4", "#", class: "btn btn-default", id: "mobileButton" %>
</div>

我会说，按钮本身不是我通常制作它们的方式，它们也有相同的ID，这不好。相反，我建议做一些事情，例如：

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary" id="mobileButton1">Box 1</a>
  <a href="#" class="btn btn-primary" id="mobileButton2">Box 2</a>
  <a href="#" class="btn btn-primary" id="mobileButton3">Box 3</a>
  <a href="#" class="btn btn-primary" id="mobileButton4">Box 4</a>
</div>

---

您需要在CSS中添加

框大小属性。

因为您使用了
填充：10px属性，它提供了强制其他对象自动调整的附加元素。使用
框大小：边框框将帮助您修复它。

#mobileButton {
  width: 25%;
  border-radius: 0px;
  background-color: antiquewhite;
  padding: 10px 0 !important; 
  border: 0px;
  margin: 0 !important;
  box-sizing: border-box; /*here*/
}

您也可以在此处阅读：

您需要在CSS中添加
框大小属性。

因为您使用了
填充：10px属性，它提供了强制其他对象自动调整的附加元素。使用
框大小：边框框将帮助您修复它。

#mobileButton {
  width: 25%;
  border-radius: 0px;
  background-color: antiquewhite;
  padding: 10px 0 !important; 
  border: 0px;
  margin: 0 !important;
  box-sizing: border-box; /*here*/
}

您也可以在此处阅读：

为什么不使用bootstrap3的col md-*和col xs-*类？（*是从1到12的数字）为什么不使用bootstrap3的col md-*和col xs-*类？（*是一个从1到12的数字）谢谢-我想知道为什么它不起作用，你的解释有帮助。谢谢-我想知道为什么它不起作用，你的解释有帮助。