在表格中,twitter bootstrap input append下拉按钮出现在输入的错误一侧

Question

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

两个项目都具有正确的形状.即.圆角和直边位于正确的边上但由于按钮位于输入的左侧,因此直边不对齐.它的圆角是彼此相邻的.我想让它们像标记一样出现,输入并排放下按钮,看起来是连在一起的.即使尝试使用类"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>  

• 我唯一拥有的是twitter bootstrap和jquery ui.
• 在safari和firefox中也一样.
• 它在表单标签内.
• 我已经尝试了很多我能想到的div,spans,class(append,prepend,btw-group,add-on,control-group等)的组合.

我做错了吗？我可以添加任何额外的CSS以使其工作吗？任何帮助,将不胜感激.

对于奖励积分:附加和前置示例(http://twitter.github.com/bootstrap/base-css.html#forms)在我的网站上或表外都不起作用.我只能同时使用其中一个或两个.

Answer 1

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

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在您的输入字段中，它应该可以工作：

超文本标记语言

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

演示，在这里编辑。