Question

我有一个网格。

<div class="col-lg-3 col-md-6">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="row">
                <div class="col-xs-3">
                    <img src="image.jpg" alt="125x125">
                    <div> <big> 6/10</big></div>
                </div>
                <div class="col-xs-9">
                    <div>Name : ALEXANDER REYES</div>
                    <div>dob : 14-09-1980</div>
                    <div>gender : male</div>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <a href="#" ><span class="pull-left">profile</span> </a>
            <a href="#" ><span class="pull-right">records</span> </a>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

名称，dob，性别文字非常接近图像。他们之间没有空间。如何在bootstrap中获得网格之间的空间。

Answer 1

以这种方式更改HTML

            <div class="col-xs-3">
                <img src="image.jpg" alt="125x125">
                <div> <big> 6/10</big></div>
            </div>
            <div class="col-xs-8 pad10Left">
                <div>Name : ALEXANDER REYES</div>
                <div>dob : 14-09-1980</div>
                <div>gender : male</div>
            </div>

 <style>.pad10Left{padding-left: 10px;}</style>

或者你可以使用

           <div class="col-xs-4">
                <img src="image.jpg" alt="125x125">
                <div> <big> 6/10</big></div>
            </div>
            <div class="col-xs-8">
                <div>Name : ALEXANDER REYES</div>
                <div>dob : 14-09-1980</div>
                <div>gender : male</div>
            </div>

Answer 2

或者你可以将它们设为文本

<div class="col-lg-3 col-md-6">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <div class="row">
                <div class="col-xs-3">
                    <img src="http://placehold.it/125x125" alt="125x125">
                    <div> <big> 6/10</big></div>
                </div>
                <div class="col-xs-9 text-right">
                    <div>Name : ALEXANDER REYES</div>
                    <div>dob : 14-09-1980</div>
                    <div>gender : male</div>
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <a href="#" ><span class="pull-left">profile</span> </a>
            <a href="#" ><span class="pull-right">records</span> </a>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

这是工作小提琴 http://jsfiddle.net/52VtD/9091/

如何在网格引导程序之间获得空间

2 个答案: