在行元素之间添加引导程序引导程序

Question

我在引导程序的行类中有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> 

Answer 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> 

Answer 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/