使用Twitter Bootstrap将图标放置在输入框右侧并固定位置

Question

使用Twitter Bootstrap将图标放置在输入框右侧并固定位置

cssasp.net-mvcformstwitter-bootstrapalignment

3

我刚开始使用Twitter Bootstrap（我对它还不太熟悉！）并尝试创建一个具有特定视觉元素的两栏表单。表单的完整宽度约为视口宽度的80％，其中包含两列（大致等间距）标签和相关文本框。某些文本框需要在文本框右侧固定小图标，并且当用户调整浏览器窗口大小时，该图标应保持固定在文本框的右侧（至少保持到1024x768分辨率）。我还尝试使用“响应式设计”来实现所有这些。在高分辨率下可以看到效果很好，但我知道我的做法有问题，因为当用户调整浏览器窗口大小时，图标会显示在文本框“内部”。以下是第一张图片，展示了表单在各种尺寸下的外观（大致如此）。

More or less correct alignment of visual elements on the form

但是，当调整浏览器窗口大小时，它会这样做：缩小浏览器窗口后，信封图标移动到文本框内

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

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

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

我相信我采取了完全错误的方法，但是我不是设计师，所以我很难调整当前的标记以实现我想要的效果。有人能帮忙吗？

- CraigTP

1

你尝试过前置和后置输入吗？ - Sherbrow

@Sherbrow - 我之前尝试过这个，但是没有什么好运气，不过最近我还尝试了其他的东西，结合起来我觉得我成功了。请看下面我的回答。感谢你的帮助！ - CraigTP

2个回答

0

好的，在一些尝试后，我相信我已经找到了一个解决方案！

这是一个更新的JSFiddle：

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

强调答案（忽略第一列 - 我已经单独修复了它。）

非常感谢LiverpoolsNumber9和Sherbrow两位在指导我解决问题方面的帮助。

我的解决方案的关键是删除围绕需要附加图标的输入元素的元素上的类（保留此会导致各种奇怪而神奇的问题），但同时还要将输入元素和图标元素包装在额外的

中，并使用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方面，我仍然感觉像这样！

- CraigTP

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LiverpoolsNumber9 · Accepted Answer

在 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;
}