【问题标题】：How to reduce the space between four buttons in bootstrap 3如何减少引导程序 3 中四个按钮之间的空间
【发布时间】：2015-06-22 18:46:51
【问题描述】：

我正在使用 bootstrap 3 在我的网页顶部创建一个简单的菜单，其中 btn 和 btn-info 类位于四个 div (col-md-3) 中。按钮之间的空间太高。我怎样才能减少它们之间的空间？例如 5 像素边距。这是我的代码：

<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
پشتیبانی
</button>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
آموزش نصب آی او اس ۹
</button>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
آموزش به دست آوردن یودید
</button>
</div>
<div class="col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-info">
خانه
</button>
</div>
</div>
</div>

您可以在以下网址查看网站：ios9.siblearn.ir

【问题讨论】：

我不会使用网格来创建菜单。相反，您应该将所有这些按钮放在同一个 div 中并使用 display:inline-block;（这实际上是 Bootstrap 中按钮的默认显示属性，因此您无需在 CSS 中执行任何操作）。

标签： css twitter-bootstrap

【解决方案1】：

未来的提示，bootply.com 更适合模拟 Bootstrap 问题，因为它默认包含 Bootstrap 框架。以下是我的设置方式：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button class="btn btn-info">
      پشتیبانی
      </button>

      <button class="btn btn-info">
      آموزش نصب آی او اس ۹
      </button>

      <button class="btn btn-info">
      آموزش به دست آوردن یودید
      </button>

      <button class="btn btn-info">
      خانه
      </button>
    </div>
  </div>
</div>

Bootply Example

【讨论】：