Bootstrap行間距問題

Question

因此，基本上我想在md和更高位置的左右兩側顯示2個額外的面板，但在sm和xs上隱藏它。 隱藏效果很好，但顯示效果不好。

它們確實出現在左側和右側，但是問題是碎屑和導航之間的間距。 當我在右側面板中添加內容時，碎屑會被壓低。 當我添加到左側面板時，它被推到一側。

左邊什么都沒有，但右邊的東西與第一張圖片相同

這就是我的意思：

我需要它在第三張照片上，以便面包屑保持在導航下方。

這是我的代碼：

        <div class="container">
        <h1>Bootstrap grid (Bootstrap)</h1>
        <div class="site-box">
            <div class="container-fluid">

                <div class="row">

                    <!-- HEADER -->
                    <!-- Logo -->
                    <div class="col-xs-4 col-md-3">
                        logo
                    </div>

                    <!-- Search -->
                    <div class="col-xs-8 col-md-6">
                        search
                    </div>

                    <!-- Control Panel -->
                    <div class="col-xs-12 col-md-3">
                        control panel
                    </div>

                </div>

                <div class="row">

                    <div class="col-md-3 hidden-xs hidden-sm">
                        extra panel
                    </div>

                    <!-- NAVIGATION -->
                    <div class="col-xs-12 col-md-6">
                        nav
                    </div>


                    <div class="col-md-3 hidden-xs hidden-sm">
                        extra panel

                    </div>

                    <div class="clearfix visible-md-block"></div>

                    <!-- Crumbs -->
                    <div class="col-xs-12 col-md-6 col-md-offset-3">
                        crumbs
                    </div>


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

Answer 1

如果您希望面包屑保持在導航之下，則將它們與col-md-6放在一個容器中，並同時給它們兩個col-md-12。

我建議這樣做的原因是因為它看起來像“額外面板”中內容的變化（圖2至圖3），因此影響了“額外面板”的高度。使面包屑坐在中間，旁邊的容器高度發生變化可能具有挑戰性。