在行元素引导程序之间添加边距 [英] Add margin between row elements bootstrap

查看：30
本文介绍了在行元素引导程序之间添加边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的行类中有 3 个不同的元素，带有引导程序.我希望在行容器中的每个元素之间创建一个边距(例如 20px).由于元素被分成行容器的 4 个相等的空间(在同一行上)，添加一个边距参数为 20px 的边距类会将其他元素推到下一行(而我想将它们全部保留在同一行).

我当前的代码

<a style="display:block" href="#"><div class="col-sm-4 margin"><span class="glyphicon glyphicon-envelope"></span><h4>关于我们</h4>
</a><a style="display:block" href="#"><div class="col-sm-4 margin"><span class="glyphicon glyphicon-envelope"></span><h4>联系人</h4>

</a><a style="display:block" href="#"><div class="col-sm-4 margin"><span class="glyphicon glyphicon-envelope"></span><h4>即将举行的活动</h4>

</a>

解决方案

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

看这个小提琴

 
<div class="col-sm-4"><h4 class="margin"><a style="display:block" href="#"><span class="glyphicon glyphicon-envelope"></span>关于我们</a>
<div class="col-sm-4"><h4 class="margin"><a style="display:block" href="#"><span class="glyphicon glyphicon-envelope"></span>关于我们</a>

<div class="col-sm-4"><h4 class="margin"><a style="display:block" href="#"><span class="glyphicon glyphicon-envelope"></span>关于我们</a>

I have 3 different elements in my row class with bootstrap. I wish to create a margin (of 20px for example) between EACH of the elements in the row container. Since the elements are divided into 4 equal spaces of the row container (on the same line), adding a margin class with a margin parameter of 20px pushes the other elements to the next line (whereas I want to keep them all in the same line).

My current code

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

解决方案

I've changed the structure to a more proper one I think. And I use padding on h4 element.

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>

这篇关于在行元素引导程序之间添加边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆