使用Bootstrap列时，隐藏元素会影响其他不相关的元素
托尼_89
我有一个仪表板，在顶部导航中，我在两个单独的div中显示日期和时间，如下所示。div标签不言自明。我在网站上使用引导程序，以使行和列保持整洁。
<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>
我的问题是我有一个设置面板，您可以在其中切换日期或时间。切换效果很好，但是当您切换日期时，时间会松开其样式，并且列表变为垂直。任何想法，我怎么能阻止这个。我提供了一个小提琴，所以您可以在这里看到问题。感谢您的任何帮助。在我的脑海中，我可能将其视为样式问题，这可能是由于引导程序引起的，但我无法弄清楚。
在切换之前，时间ID如下显示：
在切换日期后，时间显示如下：
hon2a
问题是，您试图在没有设置宽度的容器中使用流体布局。这意味着内容将仅拉伸以包含最宽的流内容行。当显示日期时，它将使您的容器变大，从而又将给时间栏更多的空间。隐藏日期时，容器只会拉伸以容纳最宽的项目，这是数字之一。
在尝试使用流体布局之前，请在容器（.clock）上设置一个宽度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在numpy矩阵中增加元素也会影响不同的矩阵和不相关的行
- 2
CSS不相关元素夹在其他元素之间
- 3
不相关时如何删除元素的内容？
- 4
当“不相关”的html select元素未选择任何选项时，如何退出jQuery事件？
- 5
填充（主要是）不相关的元素时，数据列表损坏
- 6
选择与其他记录不相关的记录
- 7
CSS悬停样式在不相关的元素上？
- 8
如何使用MVVM模式创建和组织与UI不相关的元素
- 9
jQuery滑块会影响页面上的其他元素
- 10
使用指针时 C 中的奇怪代码行为，其中注释代码的某个不相关部分会影响输出
- 11
为什么不相关的变量会影响另一个变量？时刻.js
- 12
填充Listview会导致其他元素部分隐藏
- 13
填充Listview会导致其他元素部分隐藏
- 14
影响悬停时父div中的其他元素
- 15
如何溢出：隐藏会影响块元素？
- 16
找不到其他 div 时隐藏 div 元素
- 17
方法错误，仅在添加其他不相关的代码之后
- 18
在SQL Server的其他服务中选择不相关的mobileNO
- 19
选择第一个选项时使用jQuery，然后隐藏其他元素
- 20
当我调用不相关的方法时，c字符串的值会更改
- 21
隐藏一个元素但不隐藏其他元素的滚动条（单击/事件时）
- 22
有没有更好的方法来复制工作簿并隐藏不相关的列？
- 23
连接来自三个不相关表的元素
- 24
震动效果不影响其他元素
- 25
CSS悬停不会影响其他元素
- 26
悬停伪类影响其他元素
- 27
CSS3为幻灯片/隐藏导航设置动画以影响其他元素
- 28
如何使隐藏的div向下滑动而不影响同一行中的其他元素
- 29
如何进行CSS转换会影响其他元素的流程
我来说两句