引导面板未正确对齐

时间:2014-09-03 03:12:14

标签: html css html5 twitter-bootstrap-3

我需要在bootstrap 3中创建一个良好对齐的列,在第一行中创建三个窗格,在secode行中创建四个

如果您转到jsfiddle http://jsfiddle.net/oghenez/xTc7a/33/embedded/result/,您会看到secode行中的第一个面板与第一行中的第一个面板不对齐。

这是我的代码

<div class="row">

        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"> Today's Schedule</h3>
                </div>
                <div class="panel-body">

                </div> 
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title"> Information Log</h3>
                    </div>
                    <div class="panel-body">

                    </div> 
                </div>
            </div>  
        </div>
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"> Office Tasks</h3>
                </div>
                <div class="panel-body">

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

</div>

<div class="row">

<div class="col-md-3">
</div>

<div class="col-md-3">
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title"> Office Tasks</h3>
    </div>
    <div class="panel-body">

    </div>
</div>
</div> 
<div class="col-md-3">
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title"> Office Tasks</h3>
    </div>
    <div class="panel-body">

    </div>
</div>
</div> 
<div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"> Office Tasks</h3>
                </div>
                <div class="panel-body">

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

</div>

Remove padding or space

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:4)

如果你在row内摆脱<div class="col-md-6">,一切都会排好。

enter image description here

请参阅Bootply