奇怪的引导输入组行为

Posted 2023-02-22

【中文标题】奇怪的引导输入组行为

【英文标题】：Weird Bootstrap input group behavior

【发布时间】：2015-01-09 21:43:47

【问题描述】：

上图显示了我尝试使用 ASP.NET 文本框创建自己的“轻量级”Bootstrap 外观的 ComboBox 控件。

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

我在这里没有做任何花哨的事情。 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; 

【参考方案1】：

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

【参考方案2】：

我想通了：

有了这个 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>

你得到（分别）：

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