Html 如何在一行中放置4个选择器以恰好填充一个col-sm-4网格？

我正在使用Bootstrap和col-sm-4网格制作一个简单的表单。现在看来：

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

由于某种原因，我的下拉列表看起来像普通的HTML，没有任何样式，尽管我给它们添加了class=selectpicker。我希望他们会像：

我想得到这样的东西：

这是我的小提琴：

我应该使用什么引导类

---

提前谢谢你。

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

这里有一个实用的提琴来演示您的代码和包含的脚本的外观。转到左侧的“外部资源”选项卡，查看我包含了哪些脚本/样式表以及它们的顺序：

我补充说

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

只是为了使JSFIDLE上的演示更整洁

---

关于窗口调整期间不稳定的位置，这与您使用引导网格类有很大关系。在我的提琴中，您会看到我删除了很多列类，因为它们不是必需的。我对CSS所做的是很重要的，因为我必须覆盖默认的引导选择宽度样式，以便正确居中。另外，为了防止您遗漏，我在标签和选择选项之间明确添加了一个换行符。

非常感谢您的评论。是的，下拉菜单现在看起来不错，但当我调整浏览器窗口的大小时，它们会变得一团糟。您能推荐我使用什么类来获得响应性设计吗？