input-group-addon with bootstrap-select

我尝试使用带有bootstrap-select的 Label 2 ，但它看起来与bootstrap （ Label 1 ）不同。 如何让下面代码中的两个标签看起来一样？

              
 
 
 Labe 1   GO!  
 
 
 
 
 
 
 
 Label 2 
 
  Hot Dog, Fries and a Soda Burger, Shake and a Smile Sugar, Spice and all things nice Baby Back Ribs A really really long option made to illustrate an issue with the live search in an inline form  
 
 
     $('.selectpicker').selectpicker();    

Answer 1

来自Bootstrap 文档 ：

通过在任何基于文本的之前，之后或两侧添加文本或按钮来扩展表单控件。 将.input-group与.input-group-addon或.input-group-btn以将元素添加或附加到单个.form-control 。

您需要将select和.input-group-addon包装在.input-group ：

 
 Label 2  Hot Dog, Fries and a Soda Burger, Shake and a Smile Sugar, Spice and all things nice Baby Back Ribs A really really long option made to illustrate an issue with the live search in an inline form   

看看这个：

  
 
 
 Labe 1   GO!  
 
 
 
 
 
 
 Label 2  Hot Dog, Fries and a Soda Burger, Shake and a Smile Sugar, Spice and all things nice Baby Back Ribs A really really long option made to illustrate an issue with the live search in an inline form  
 
 
  

Answer 2

我已经使用额外的CSS修改了caeth的解决方案，以确保选择按钮在各自的角落处呈圆角。

HTML

 
 
 Label  Hot Dog, Fries, and a Soda Burger, Shake, and a Smile Sugar, Spice, and all things nice Baby Back Ribs A really really long option made to illustrate an issue with the live search in an inline form  
  

CSS

 .input-group > .input-group-btn:last-child > .selectpicker { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .input-group > .input-group-btn:first-child > .selectpicker { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } 

在这里查看： http ： //jsfiddle.net/xr4uofje/130/

Answer 3

我刚刚发现了一种简单的方法，可以在select（无引导选择）中包含附加组件。 这个答案可能与bootstrap-select问题没有严格的关系，但对于登陆这里寻找这个答案的人来说可能会有所帮助（正如我所做的那样）。 我只是移动附加组件下的选择，边距为：-4px，并像这样在宽度上添加4个像素

 .input-group select.form-control { margin-left: -4px; width: calc(100% + 4px); } 

然后我为附加组件设置了一个相对位置和z-index，如下所示：

 .input-group .input-group-addon { z-index: 5; position: relative; } 

我希望这有帮助