将边框线添加到引导网格

时间:2014-08-26 07:01:43

标签: html css twitter-bootstrap

enter image description here在此输入图像描述我有一个使用col-md-3类创建的网格,它有3列:

<div ng-repeat='(key, value) in permissionsViewContent' class="row">
    <div class="tree_content_permissions_title">
        <span> {{key}}</span>
    </div>
    <div ng-repeat="val in value"
        class="col-md-3 tree_content_permissions">
        <label class="checkbox"> <input type="checkbox"> 
            {{val}}
        </label>
    </div>
</div>

此网格是根据值列表创建的。我希望我的网格在网格中的每一行后都有边框线。我怎么能用css来做呢?

谢谢,

2 个答案:

答案 0 :(得分:2)

只需您可以在任意位置使用<hr/>标记

您可以这样使用:

DEMO

 <div class="row">
            <div class="tree_content_permissions_title">
                <span>asd</span>
            </div>
            <div class="row">
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" value="sadfdsf" />
                        sdfsdf
                    </label>
                </div>
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" />
                        sdfsdf
                    </label>
                </div>
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" />
                        sdfsdf
                    </label>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" value="sadfdsf" />
                        sdfsdf
                    </label>
                </div>
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" />
                        sdfsdf
                    </label>
                </div>
                <div class="col-md-3 tree_content_permissions">
                    <label class="checkbox">
                        <input type="checkbox" />
                        sdfsdf
                    </label>
                </div>
            </div>
            <hr />
        </div>

答案 1 :(得分:0)

然后添加DEMO

<div ng-repeat='(key, value) in permissionsViewContent'>
    <div  class="row">
        <div class="tree_content_permissions_title">
            <span> {{key}}</span>
        </div>
        <div ng-repeat="val in value"
            class="col-md-3 tree_content_permissions">
            <label class="checkbox"> <input type="checkbox"> 
                {{val}}
            </label>


        </div>
    </div>
<hr>
</div>