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）中的内容，所以影响了'额外面板'的高度。将碎屑放在中间，容器高度接下来它的变化可能具有挑战性。