Javascript 奇怪的引导输入组行为

上图显示了我尝试使用ASP.NET textbox创建自己的“轻量级”引导式ComboBox控件

上面显示的由一个文本框和按钮（带黑色箭头）组成的看起来很有趣。以前有人经历过吗？你知道为什么会这样吗？有什么建议可以解决这个问题吗

我在这里没有做任何花哨的事。支持将按钮“附加”到文本框的机制

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>

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

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

---

这是Twitter引导中的一个常见问题。 输入字段的“计算”CSS高度与实际按钮的CSS高度不同。 在浏览器上打开“开发人员工具”，检查元素样式，然后找到覆盖的位置|或-修复下拉按钮的引导CSS，附加：

！重要信息

因此无法覆盖它。

我发现： 使用此HTML：

你会得到：

但使用以下HTML示例：

<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>

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

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

或

行动

你（分别）得到：

因此，看起来您需要在

之前添加一个单词（例如，Action）或仅放置一个HTML空格（例如，

）。我希望这对某人有帮助