使用 Twitter Bootstrap 在输入文本框右侧放置并修复图标

Question

我刚刚开始使用 Twitter Bootstrap（我是新手，所以我还没有完全掌握它！）我正在尝试创建一个包含一些特定视觉元素的两列表单。

表格的完整宽度约为。视口宽度的 80% 和此处是两列（大致等间距）标签和相关文本框。一些文本框需要在文本框的右侧附加一个小图标，并且当用户调整浏览器窗口大小时，该图标保持固定在文本框的右侧（至少保持这样分辨率低至 1024x768）。我也在尝试通过“响应式设计”来实现所有这些。

我可以让它在更高分辨率下看起来不错，但我知道我做错了，因为当用户调整浏览器窗口大小时，图标显示在文本框“内部”。

第一张图片显示了表单在所有尺寸下的外观（大致）：

但是当调整浏览器窗口的大小时，它会这样做：

我希望那个小信封图标始终固定在文本框的右侧。不幸的是，当浏览器窗口进一步缩小时，它会移动到下一行：

我正在使用 ASP.NET MVC 来生成这种表单的大部分内容，因此标记内有很多 @Html.TextBoxFor 调用，但是，我已经发布了一个 JSFiddle，其中包含部分相关渲染突出问题的标记：

http://jsfiddle.net/qYTSY/1/

我确定我对此采取了完全错误的方法，但是我不是设计师，所以我正在努力调整当前的标记以实现我所追求的。有人可以帮忙吗？

Answer 1

在 jsfiddle 中我添加了一个类：

.controls-row-with-icon {
    width: 28em;
}

...然后显然将两个div改为：

<div class="controls controls-row controls-row-with-icon">

将邮件图标“固定”在右侧。不确定它是否会“破坏”其他任何东西？

注意：在 jsfiddle 中，这两列似乎相互重叠 - 但不确定它是否会在您的生产版本中这样做？当视口较小时，我无法让 rh 列“落入” lh 列 - 但您猜这在您的生产代码中可以正常工作吗？

罗伯

编辑

查看评论

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;

}

.row{
    /*min-width: 62em;*/ /* add this is viewport should be fixed */
}

.controls-row{
    width: 30em;
    background: #ccc;
}

.row-fluid .span5{

    margin-left: 0;
    margin-right: 2em;
    width: 30em;
}

.row-fluid .offset1{
    margin-left:0;
    margin-right: 0;
}

​

Answer 2

好吧，经过一番折腾，我相信我找到了解决办法！

这是一个更新的 JSFiddle：

http://jsfiddle.net/qYTSY/32/

突出显示答案（忽略第一列 - 我已单独修复。）

非常感谢 LiverpoolsNumber9 和 Sherbrow 帮助我找到解决方案。

我的解决方案的关键是删除需要附加图标的输入元素周围的span 元素上的span3 类（留下这个span 会导致各种奇怪而奇妙的问题） ，但随后还将输入元素和图标元素包装在一个额外的div 中，并使用input-append 和add-on 类以确保将图标放置并固定在输入框的右侧。

所以这个标记：

<div class="controls controls-row">
    <span class="span3"><label for="Contact_EMail">EMail</label></span>
    <span class="span3"><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
    <span class="offset4"><a href="mailto:someone@example.com" id="emaillink"><i class="icon-envelope" id="emailicon"></i></a></span>
</div>

变成了这样：

<div class="controls controls-row">
    <span class="span3"><label for="Contact_EMail">EMail</label></span>
    <div class="input-append">
        <span><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
        <span class="add-on"><a href="mailto:someone@example.com" id="emaillink"><i class="icon-envelope" id="emailicon"></i></a></span>
    </div>
</div>

虽然我找到了解决方案，但我不得不承认，在 CSS/样式/Twitter Bootstrap 方面，我仍然觉得lot like this！