标题与其下方图标之间的保证金

Question

我尝试修改我下载的bootstrap模板。标题What we do的现有设置为<h2 class="title text-center sr-only">What we do</h2>。但我想展示它，所以我将此行更改为<h2 class="title text-center">What we do</h2>。整段代码如下：

<section id="features" class="features section">
    <div class="container">
        <div class="row">
          <h2 class="title text-center">What we do</h2>
            <div class="item col-md-4 col-sm-6 col-xs-12 text-center">
                <div class="icon">
                    <i class="fa fa-cloud-upload"></i>                
                </div><!--//icon-->
                <div class="content">
                    <h3 class="title">App Feature One</h3>
                    <p>Outline an app feature/benefit here. You can change the icon above to any of the 500+ <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">FontAwesome icons</a> available. </p>  
                    <button class="modal-trigger btn btn-link" data-toggle="modal" data-target="#feature-modal-1">Find out more</button>
                </div><!--//content-->               
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12 text-center">
            ...
            </div><!--//item-->
            <div class="item col-md-4 col-sm-6 col-xs-12 text-center">
            ...
            </div><!--//item-->
        </div><!--//row-->
    </div><!--//container-->
</section><!--//features-->

它看起来如下。问题是我感觉标题太靠近下面的图标。

但是，以下现有代码不存在此问题：

<section id="testimonials" class="testimonials section">
    <div class="container">
        <div class="row">
            <h2 class="title text-center">What do people think?</h2>
            <div class="item col-md-4 col-sm-4">
                <div class="quote-box">
                    <i class="fa fa-quote-left"></i>
                    <blockquote class="quote">
                        <a href="#">@Delta</a> I love this #app. Lorem ipsum dolor sit amet, consectetur adipiscing elit. #Mobile
                    </blockquote><!--//quote-->
                </div><!--//quote-box-->
                <div class="people row">
                    <img class="img-rounded user-pic col-md-5 col-sm-5 col-xs-12 col-md-offset-1 col-sm-offset-1" src="assets/images/people/people-1.png" alt="" />
                    <p class="details text-center pull-left">
                        <span class="name">Christine Heal</span>
                        <span class="title">Bristol, UK</span>
                    </p>                        
                </div><!--//people-->
            </div><!--//item-->
            <div class="item col-md-4 col-sm-4">
                <div class="quote-box">
                    ...

显示：

有谁知道如何修改类样式以在标题和它下面的图标之间留出适当的空间？

PS：features中的base.less部分：

.features {
    padding: 80px 0;
    .icon {
        position:relative;
        width: 90px;
        height: 90px;
        border: 3px solid @color;
        .border-radius(50%);
        display: table;
        margin: 0 auto;
        -webkit-transition: -webkit-transform ease-out 0.2s, background 0.3s;
        -moz-transition: -moz-transform ease-out 0.2s, background 0.3s;
        transition: transform ease-out 0.2s, background 0.3s; 

        &:hover {
            background: @color;
            color: #fff;                                    
            .fa {
                color: #fff;   
                .scale(0.93);             
            }
            .pe-icon {
                color: #fff;   
                .scale(0.93);  
            }
        }
        .fa {
            color: @color;
            font-size: 48px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;                        
        }
        .pe-icon {
            color: @color;
            font-size: 48px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;                        
        }
    }
    .content {
        padding: 30px;
        .title {
            color: @color;
            font-size: 18px;
            margin-top: 0;
        }
        p {
            font-weight: 300;
        }
    }
    .feature-row-last {
        margin-top: 30px;
    }
    .btn-link {
        color: @color;
        &:hover {
            color: darken(@color, 10%);
        }
    }
}

Answer 1

你可以在<h2 class="title text-center">What we do</h2>这一行使用填充。

padding:10px 0px;

它可以帮助您提供适当的保证金。从firbug更改css，以便您可以看到输出。