当内部div使用“可见”类时，外部div消失

Question

以下是 fiddle 供参考。

我刚开始使用Bootstrap 3而且我不明白为什么div没有按照我想要的方式运行。我有以下代码：

<div class="container">
    <div id="mdgov_TopSliverBar" class="col-xs-12">
        <div id="mdgov_TopSliverBarContent">
            <div id="mdgov_sliverRight">
                <span>Testing</span>
            </div>
            <div id="mdgov_sliverLeft">
                <div id="mdgov_mobileNavButton" class="visible-xs">
                    <i class="fa fa-bars">&nbsp;</i>
                    <span>Menu</span>
                </div>
            </div>
        </div>
    </div>
</div>

我的代码的作用：

当我将窗口调整为超小尺寸以外的其他东西时，“mdgov_TopSliverBar”div消失了，我剩下的就是“测试”这个词 - 如果“mdgov_TopSliverBar”div没有，它将在正确的位置消失了。

我的代码应该做什么：

当调整窗口大小时，我希望“mdgov_TopSliverBar”div与“mdgov_sliverRight”div一起保留，我希望“mdgov_mobileNavButton”div消失。基本上，当窗口大小不是特别小的时候，我应该在右边有一个黑色栏，右边有“测试”字样。当窗口特别小时，除了右侧的“测试”外，我还应该在左侧有移动菜单图标和“菜单”一词。

再一次，这是 fiddle 供参考。

Answer 1

问题在于CSS。我需要在float: left;中删除#mdgov_sliverLeft并在float: right;中添加#mdgov_sliverRight。所以看起来应该是这样的：

#mdgov_sliverLeft {
    white-space: nowrap;
}

#mdgov_sliverRight {
    float: right;
    white-space: nowrap;
    right: 2.5%;
    padding: 6px 0;
}

以下是更新的 fiddle 。

Answer 2

尝试添加visible-md和/或visible-sm以及visible-xs - 您可以嵌套这些类以获得所需的效果。