簡體   English   中英

引導面板未正確對齊

[英]bootstrap panel not align correctly

我需要在引導程序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>

刪除填充或空格

我該如何解決?

如果你擺脫row的內部<div class="col-md-6">一切都會排隊。

在此處輸入圖片說明

請參閱Bootply

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM