Css 使用Twitter引导在输入文本框右侧放置并修复一个图标

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

表单的完整宽度约为视口宽度的80%，其中有两列（大致等距排列）标签和相关文本框。一些文本框需要在文本框的右侧粘贴一个小图标，以便在用户调整浏览器窗口的大小时，该图标保持固定在文本框的右侧（至少在1024x768分辨率下保持这样）。我还试图通过“响应性设计”来实现这一切

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

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

但在调整浏览器窗口的大小时，它会执行以下操作：

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

我正在使用ASP.NET MVC生成此表单的大部分内容，因此在标记中有大量的

@Html.TextBoxFor

调用，但是，我发布了一个JSFIDLE，其中包含一部分相关呈现标记，突出了问题：

---

我肯定我采取了一个完全错误的方法，但是我不是设计师，所以我正在努力调整当前的加价，以实现我的目标。有人能帮忙吗？

在JSFIDLE中，我添加了一个类：

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

…然后明显地将两个分区更改为：

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

---

​

好吧，经过一番闲逛，我相信我找到了解决办法

以下是更新的JSFIDLE：

这突出了答案（忽略第一列-我已经分别修复了它。）

非常感谢他们，感谢他们帮助我找到解决方案

我的解决方案的关键是删除输入元素周围的

span

元素上的

span3

类，这些元素需要附加图标（保留此

span

会导致各种奇怪和奇妙的问题），然后还将输入元素和图标元素包装在一个额外的

div

中，并使用

input append

和

附加类

，以确保图标放置并固定在输入框的右侧

所以这个加价：

<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引导方面，我仍然感觉到了一个问题

另外，请注意，您使用%年龄表示宽度-这很好。但是，除非标签和文本框的大小也是流动的（包括字体大小和图像大小），否则你需要一些固定的宽度来避免这些重叠问题。好吧，这里举一个我如何从头开始做的例子。。。好-从原来的js小提琴-现在使用一些固定的宽度等有一个更固定，但仍然流体浮动2列将坐在下面，如果视口太小-调整宽度等需要。它主要是用em覆盖了%年龄宽度（见答案中的编辑），你试过了吗？@Sherbrow-我以前试过这个，运气不太好，但是，我最近也尝试了其他与此相结合的方法，我想我已经做到了。见下面我的答案。谢谢你的帮助！

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