奇怪的Bootstrap输入组行为

Question

上图显示我尝试创建自己的轻量级＆＃34;使用ASP.NET文本框的Bootstrap-look ComboBox控件。

上面显示的input group由texbox和按钮（黑色箭头）组成，看起来很有趣。有谁之前经历过这个吗？关于为什么它看起来那样的任何想法？有什么建议可以解决这个问题吗？

我这里没有做任何想法。 ＆＃34;追加的机制＆＃34; Bootstrap支持文本框的按钮。

ASPX页面

<div class="col-sm-3" id="TimesheetStep"><b>Timesheet Date</b> 
   <div class="input-group">                                              
      <asp:TextBox runat="server" ID="TimesheetBox" CssClass="form-control">
      </asp:TextBox>

      <div class="input-group-btn">

         <button type="button" class="btn btn-inverse dropdown-toggle" 
                 data-toggle="dropdown">
            <span class="caret"></span>
         </button>

         <ul id="demolist" class="dropdown-menu scrollable-menu pull-right" 
             runat="server" role="menu">                                  

             <li><a href="#">11/22/2013</a></li>
             <li><a href="#">11/15/2013</a></li>
             <li><a href="#">11/08/2013</a></li>
         </ul>

      </div>

   </div>                            
</div>

CSS：

.scrollable-menu {  height: auto; max-height: 300px; overflow-x: hidden; }

Answer 1

我想通了：

使用此HTML：

<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
   <span class="caret"></span>
</button>

你得到：

但是使用以下HTML示例：

<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
   &nbsp;<span class="caret"></span>
</button>

或者

<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
   Action<span class="caret"></span>
</button>

你得到（分别）：

所以看起来你需要添加一个单词（例如，Action）或者只是在 之前添加一个HTML空间（例如<span class="caret"></span>）。我希望这有助于某人。

Answer 2

这是Twitter Bootstrap中的常见问题。 输入字段的“计算”CSS高度与实际按钮的不同。 在浏览器上打开“开发人员工具”，检查元素样式，然后找到它被覆盖的位置或者 - 修复下拉按钮的bootstrap CSS，追加：!important，这样就无法覆盖。