html - 内联按钮布局打破了下拉内容布局

标签 html css twitter-bootstrap

我需要有 3 个相互内联的下拉按钮。我使用 btn-group,但这会破坏其中一个下拉菜单的布局。下拉内容的布局需要很宽,但是使用 btn-groupdisplay:inline-block 会强制它成为标准的窄下拉列表,这会破坏布局我的内容。

JS Fiddle

请注意第一个下拉菜单的宽度。如果将父 div 更改为 btn-groupdisplay:inline-block,内容会缩小并变窄。我需要保留较宽的下拉菜单,同时让所有按钮都显示在一行中。

我该怎么做?

最佳答案

你必须尝试一些功能,这样大盒子和窄盒子不会同时显示,但你的问题是通过将 .dropdown 类设置为 position:relative 你限制了它的子元素的宽度。通过删除它并更改您的 child 的顶部位置,它应该看起来像您想要的那样。

.dropup, .dropdown {
  position: inherit;
}
.dropdown-menu {
   top:40px;
}

jsfiddle-link

关于html - 内联按钮布局打破了下拉内容布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34595610/

相关文章:

html - 使用 CSS 填充整行 LI

html - 谷歌小部件链接

jquery - 使用 Bootstrap 和 ColVis 的数据表

html - 是否绝对有必要为 HTML 电子邮件使用表格?

javascript - 导航栏固定底部位置并在到达滚动位置时切换到静态

jquery - 如何在离开 jQuery 中的元素之前删除类

html - 无论如何,让页脚保持向下

javascript - 您可以使用 HTML 将文本输入作为文件上传吗?

'container available space' 的 CSS % 宽度?

javascript - 是否有任何对其元素没有影响的 CSS 属性?