在行元素引导程序之间添加边距答案

【问题标题】：Add margin between row elements bootstrap在行元素引导程序之间添加边距
【发布时间】：2016-04-03 03:27:58
【问题描述】：

我的行类中使用引导程序有 3 个不同的元素。我希望在行容器中的每个元素之间创建一个边距（例如 20px）。由于元素被划分为行容器的 4 个相等的空间（在同一行），添加一个边距参数为 20px 的边距类会将其他元素推到下一行（而我想将它们都保持在同一行）。

我当前的代码

<div class="row">
      <a style="display:block" href="#">
        <div class="col-sm-4 margin">
          <span class="glyphicon glyphicon-envelope"></span>
          <h4>About Us</h4>
        </div>
      </a>
      <a style="display:block" href="#">
        <div class="col-sm-4 margin">
          <span class="glyphicon glyphicon-envelope"></span>
          <h4>Contacts</h4>
        </div>
      </a>
      <a style="display:block" href="#">
        <div class="col-sm-4 margin">
          <span class="glyphicon glyphicon-envelope"></span>
          <h4>Upcoming Events</h4>
        </div>
      </a>
    </div>

【问题讨论】：

如何将padding 添加到.col-sm-4，并将.col-sm-4 设置为box-sizing: border-box;。看这个例子：jsfiddle.net/pe0w20kd这是你想要的吗？
如果我有一个填充和框大小到边距，我可以看到容器仍然并排（我在元素周围添加了一个边框，这是我可以看到的） .

标签： html css twitter-bootstrap

【解决方案1】：

我已将结构更改为我认为更合适的结构。我在h4 元素上使用padding。

See this fiddle

    <div class="row">          
        <div class="col-sm-4">
          <h4 class="margin">
            <a style="display:block" href="#">
              <span class="glyphicon glyphicon-envelope"></span>
                About Us
            </a>
          </h4>
        </div>

        <div class="col-sm-4">
          <h4 class="margin">
            <a style="display:block" href="#">
              <span class="glyphicon glyphicon-envelope"></span>
                About Us
            </a>
          </h4>
        </div>
        <div class="col-sm-4">
          <h4 class="margin">
            <a style="display:block" href="#">
              <span class="glyphicon glyphicon-envelope"></span>
                About Us
            </a>
          </h4>
        </div>
    </div>

【讨论】：

感谢您的回答。这确实是我想要的。我也对其进行了一些调整，在每个元素块周围添加了一个边框。
不客气。我认为最好不要通过添加修复来重载引导类，最好更改其中的元素:)
我同意。最好让代码保持美观、干净和简单！

【解决方案2】：

创建了一个小提琴以使事情变得清晰。
https://fiddle.jshell.net/q1je1kct/
这是你想要的吗
已添加
display:inline-block;

更新
https://fiddle.jshell.net/q1je1kct/4/

如果您不希望元素跳转到换行符，请查看此
https://fiddle.jshell.net/q1je1kct/5/
使用 flex 概念创建。

建议的新更新
https://fiddle.jshell.net/q1je1kct/8/

【讨论】：

感谢您的回答。但是，在您的最新更新中，即使我将鼠标悬停在元素上，我仍然可以看到它们是并排的（就单击链接而言）。我希望元素之间有一个间隙，就像我将鼠标悬停在两者之间的空间上一样，它不会向我显示手形链接（即当您将鼠标悬停在链接上时光标变为手形的方式）。因此，即使视觉上存在间隙，元素仍然没有间隔。
我已经尝试过您的代码，只需进行一些修改，它就可以按照我想要的方式工作。我接受了另一个答案只是因为它似乎是一种“更干净”的方式来表示代码。感谢您的帮助。