css - 使用 Twitter Bootstrap 在输入文本框的右侧放置并修复一个图标

Question

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

表格的完整宽度约为。视口(viewport)宽度的 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 中，两列似乎相互重叠 - 不确定它是否会在您的生产版本中这样做？当视口(viewport)较小时，我无法让 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;
}