使用Bootstrap列时，隐藏元素会影响其他不相关的元素

Question

我有一个仪表板，在顶部导航中，我在两个单独的div中显示日期和时间，如下所示。 div标签是自解释的。我在我的网站上使用bootstrap来保持行和列的整洁。

<ul class="nav navbar-right top-nav">
    <div class="clock">
        <div class="row">
            <div class="col-xs-12">
                <div class="col-xs-6">
                    <div class="Date"></div>
                </div>
                <div class="col-xs-6">
                    <ul class="time">
                        <li id="hours"></li>
                        <li id="point">:</li>
                        <li id="min"></li>
                        <li id="point">:</li>
                        <li id="sec"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</ul>

我的问题是我有一个设置面板，您可以在其中切换日期或时间。切换工作正常但是当您切换日期时，其时间将失去其样式并且列表将垂直移动。任何想法我怎么能阻止这一点。我已经包含了一个小提琴，因此您可以看到问题here。 感谢您的任何帮助。在我的脑海中，我可以将其视为造型问题，可能是由于引导程序，但我无法弄明白。

在切换之前，时间ID显示如下： 切换日期后，时间显示如下：

Answer 1

问题是，您正在尝试在没有设置宽度的容器中使用流体布局。这意味着内容将仅包含最广泛的流内容。当您显示日期时，它会使您的容器变大，这反过来会为时间列提供更多空间。当您隐藏日期时，容器只会伸展以容纳最宽的项目，这是其中一个数字。

在尝试使用流体布局之前，

在容器上设置宽度（.clock）。

Answer 2

感谢hon2a找出影响时间值布局的问题。根据hon2a的回答，我还尝试为container div设置一个类值class = "clock"。所以我改变了：

 <div class="clock">

到

 <div class="container">

Bootstrap文档说明：＆＃34;行必须放在 .container （固定宽度）或 .container-fluid 中（全宽）用于正确对齐和填充。＆＃34; 当我使用fiddle进行测试时，这也有效。