ruby-on-rails - 在表格中时，twitter bootstrap 输入追加下拉按钮出现在输入的错误一侧

Question

下面的 html 本身可以正常工作，但是当放在表格 td 中时，下拉按钮出现在输入的左侧，而它应该在右侧。 它应该类似于此页面的“扩展表单控件”部分中的附加按钮示例:http://twitter.github.com/bootstrap/base-css.html#forms

这两个项目都有正确的形状。 IE。圆角和直边在正确的边上，但由于按钮位于输入的左侧，直边不对齐。它是彼此相邻的圆角。我希望它们出现在标记中，输入与下拉按钮并排显示，似乎连接在一起。即使尝试使用“input-prepend”类(不是想要那样)它也不会改变。

注意:我通过最新版本的 twitter-bootstrap-rails gem 在 Rails 应用程序中使用 twitter bootstrap。

<div class="btn-group input-append">    
    <input class="span2" id="fruit_selection" name="fruit" />           
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Fruit <span class="caret"></span></a> 
    <ul class="dropdown-menu">
        <li><a href="#">apple</a></li>
        <li><a href="#">orange</a></li>
        <li><a href="#">banana</a></li>
    </ul>   
</div>  

我拥有的唯一 css 是 twitter bootstrap 和 jquery ui 附带的。

它在 safari 和 firefox 中是一样的。

它在表单标签内。

我已经尝试了我能想到的尽可能多的 div、span、类(追加、前置、btw-group、add-on、control-group 等)的组合。

我做错了吗？我可以添加任何额外的 CSS 来使其正常工作吗？任何帮助，将不胜感激。

奖励积分:追加和前置示例( http://twitter.github.com/bootstrap/base-css.html#forms )在我的网站上无论是在表内还是表外都不起作用。我只能使用其中一种，不能同时使用两种。

Answer 1

我知道您现在要做什么，您想使用输入而不是带有下拉组的按钮。查看 Bootstrap 的文档，我发现该设置没有解决方案，尽管您可以通过复制按钮行为并创建自己的类来支持带有下拉组的输入来轻松模拟自己的设置，如下所示:

CSS

.btn-group .input:first-child {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}

.btn-group .input {
    float: left;
    position: relative;
}

有了这个 CSS，你所要做的就是包含 .input输入字段中的类，它应该可以工作:

HTML

<div class="btn-group">    
    <input class="span2 input" id="fruit_select" name="fruit" />            
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Fruit <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#">apple</a></li>
        <li><a href="#">orange</a></li>
        <li><a href="#">banana</a></li>
    </ul>
</div>

Demo , 编辑 here .