gpt4 book ai didi

html - bootstrap col-md-12 vs. width 100% 在显示/隐藏 div 时表现不同

转载 作者:太空狗 更新时间:2023-10-29 14:50:58 24 4
gpt4 key购买 nike

我正在尝试实现类似于自动完成的下拉菜单。我注意到当我使用 col-md-12 与宽度 100% 时它的行为不同。我在下面有两个示例。

http://codepen.io/safecoder/pen/reQxZz

<div class="result_optins col-md-12">

它使用 col-md-12。当我开始输入时,下面的文本被下推。

http://codepen.io/safecoder/pen/YqRqWm

<div class="result_optins">

.search_cont .result_optins{
width: 100%;
display:none;
}

它使用宽度:100%。当我开始输入内容时,选项框与下面的文本重叠。

我无法弄清楚为什么它的行为会有所不同。任何人都可以阐明这一点吗?

此外,如果我仍然想使用 col-md-12,我该如何实现第二种情况(重叠)的效果?

最佳答案

Bootstrap 的列有 float: left ,这就是它看起来不同的原因。

如果你想保持重叠,你需要覆盖 Bootstrap 的 float: left通过添加你自己的辅助类,使用 float: none .

在您的自定义 CSS 文件中,您可以执行如下操作:

.h-fn {
float: none !important;
}

并将该类添加到适当的 HTML 元素中:

<div class="result_optins col-md-12 h-fn"> ... </div>

关于html - bootstrap col-md-12 vs. width 100% 在显示/隐藏 div 时表现不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36964646/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com