如何根据我的图像在单个网格容器中创建3个分区之间的空间

Question

​

​

please help me to making exactly appear in screen shot image 

<div class="product-feature">
<div class="container">
    <div class="row">
        <div class="product col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="product_gamut col-md-4 col-lg-4 col-sm-4 col-xs-12">
                <!--img class="img-responsive" src="images/icon1.png" alt="icon-magic"-->
                <div class="icon-product">
                    <i class="service-icon fa fa-magic"></i>
                </div>
                <h2 class="product_title">PRODUCT GAMUT</h2>
                <p class="product_para">
                    We are one of the industrial pioneers and
                    ledaers in the plastic industry.The Director
                    of the company enjoys a rich experience <br>
                    of 25 years  in the field of manufacturing HDPE pipes, irrigation pipe, sprinkler <br> pipe.
                </p>
            </div>
            <div class="production_unit col-md-4 col-lg-4 col-sm-4 col-xs-12">
                <!--img class="img-responsive" src="images/icon2.png" alt="icon-leaf"-->
                <div class="icon-product">
                    <i class="service-icon fa fa-leaf"></i>
                </div>
                <h2 class="product_title">PRODUCTION UNIT</h2>
                <p class="product_para">
                    We are one of the industrial pioneers and
                    ledaers in the plastic industry.The Director
                    of the company enjoys a rich experience<br>
                    of 25 years  in the field of manufacturing HDPE pipes, irrigation pipe, sprinkler<br> pipe.
                </p>
            </div>
            <div class="certification col-md-4 col-lg-4 col-sm-4 col-xs-12">
                <!--img class="img-responsive" src="images/icon3.png" alt="icon-cube"-->
                <div class="icon-product">
                    <i class="service-icon fa fa-cube"></i>
                </div>
                <h2 class="product_title">CERTIFICATION</h2>
                <p class="product_para">
                    We are one of the industrial pioneers and
                    ledaers in the plastic industry.The Director
                    of the company enjoys a rich experience <br>
                    of 25 years  in the field of manufacturing HDPE pipes, irrigation pipe, sprinkler<br> pipe.
                </p>
            </div>
        </div>
    </div>
</div>

​

http://codepen.io/meetshah3795/pen/PWagdV这是链接显示了我尝试根据图像进行输出所做的工作

我想创建3个盒子的col 4在单一网格之间的空间。我已经试过了，但我不能按照图像中的间隔来创建空间

Answer 1

尝试这样使用bootstrap标记：

<div class="row">
    <div class="col-sm-4 col-xs-12">
        <div class="block red">1</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <div class="block green">2</div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <div class="block blue">3</div>
    </div>
</div>

https://jsfiddle.net/sLgq1won/1/

因此，对于您的代码来说，应该是这样的：http://codepen.io/anon/pen/wgXLqP