html - 如何将 4 个选择器排成一行以正好填充一个 col-sm-4 网格？

Question

我正在使用 Bootstrap 并使用 col-sm-4 网格制作一个简单的表单。现在它看起来像:

此外，当我将浏览器宽度调整为 507px 时，C1 和 C2 元素会向下滑动到下一行:

由于某种原因，我的下拉列表看起来像没有任何样式的纯 HTML，尽管我向它们添加了 class="selectpicker"。我希望他们是这样的:

我想得到这样的东西:

这是我的 fiddle :https://jsfiddle.net/j96vaokc/

我应该使用哪些 Bootstrap 类？

提前谢谢你。

Answer 1

您有几个简单的问题。首先，selectpicker 类是这个 Bootstrap jQuery 插件的一部分，bootstrap-select .您必须下载并包含该脚本和样式表。在此之前，您还需要包括 jQuery脚本。

这是一个工作 fiddle ，用于演示您的代码和包含的脚本的外观。转到左侧的“外部资源”选项卡，查看我包含了哪些脚本/样式表以及顺序:

https://jsfiddle.net/j96vaokc/5/

我加了

.dropdown-toggle {
  width:60px !important
}

只是为了让 jsfiddle 上的演示更整洁。

关于窗口调整大小时的不稳定放置，这与您使用 Bootstrap 网格类有很大关系。在我的 fiddle 中，您会看到我删除了很多列类，因为它们不是必需的。我对 CSS 所做的事情很重要，因为我必须覆盖默认的宽度 Bootstrap 选择样式才能正确居中。另外，如果你错过了它，我明确地在标签和选择选项之间添加了一个换行符。