使用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帮助我指导解决方案。

我的解决方案的关键是删除span3元素周围的span类，这些元素需要附加图标的输入元素（将此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 / Styling / Twitter Bootstrap方面，我仍然感觉lot like this！