Question

我的行类中有3个不同的元素和bootstrap。我希望在行容器中的每个元素之间创建一个边距（例如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>

Answer 1

创造了一个小提琴，使事情变得清晰 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/

Answer 2

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

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 个答案: