5

下面的 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）在我的网站上无论是在表内还是表外都不起作用。我只能使用其中一种，不能同时使用两种。

4

2 回答 2

4

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

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>

演示，在这里编辑。

于 2012-04-04T01:11:11.657 回答
0

尝试将您的列表包装在一个以类作为控制组的 div 中 - 下面给出了一个示例。我知道你提到你尝试过控制组，但再试一次。经过大量的试验和错误后，这段代码对我有用。祝你好运。

<div class="control-group">
  <div class="controls">  
    <ul class="dropdown-menu">
        <li><a href="#">apple</a></li>
        <li><a href="#">orange</a></li>
        <li><a href="#">banana</a></li>
    </ul>   
  </div>
</div>
于 2012-04-04T00:56:25.270 回答