内联表单的引导下拉菜单自动宽度

Bootstrap dropdown menu autowidth for inline form

本文关键字:下拉菜单 表单      更新时间:2024-01-08

我正在尝试构建一个Bootstrap下拉按钮,其中唯一的下拉选项是一个包含文本输入并附有按钮的表单字段,例如:

+----------+---+
| (Button) | V |
+----------+---+-----------+
| [_<text input>_] | (Go!) |
+--------------------------+
  • 括号中的项目是可单击的按钮
  • 括号中的项目是一个文本输入字段
  • 上面的ascii图显示了如果点击下拉切换,我想要的行为

问题

我在获取下拉列表的宽度以实际适应表单字段时遇到了相当大的困难。到目前为止,我的尝试有点匹配,但不是真的匹配;表单字段比引导程序下拉宽度稍大,这看起来有点令人不快。

问题参考:http://jsfiddle.net/3z44e5va/2/

我怀疑Bootstrap下拉菜单的自动调整大小功能不适用于表单,而是仅适用于列表元素?

我热切希望有人尝试过类似的做法,并能为我们推荐的前进道路提供一些启示。

提前谢谢!

只需重置行类的边距。现在它的左边距和上边距默认为-15px。

.row{
  margin:0px;
}

http://jsfiddle.net/e4pxamho/