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

标签 css asp.net-mvc forms twitter-bootstrap alignment

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

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

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

第一张图片显示了表单在所有尺寸下的(大致)外观:

More or less correct alignment of visual elements on the form

但是当调整浏览器窗口大小时,它会这样做: Envelope icon moves inside the textbox when browser window is resized

我希望小信封图标始终固定在文本框的右侧。不幸的是,当浏览器窗口进一步缩小时,它会移动到下一行: Envelope icon moves to next line when browser window is resized even smaller

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

http://jsfiddle.net/qYTSY/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;
}

关于css - 使用 Twitter Bootstrap 在输入文本框的右侧放置并修复一个图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13027183/

相关文章:

html - 如何使用 css 媒体查询使网页移动友好

asp.net-mvc - MVC 4 AuthorizeAttribute.HandleUnauthorizedRequest ViewResult-无限循环

java - 如何解决 java.lang.NoClassDefFoundError

html - 基本 CSS 定位(相对与绝对)

css - 当 Bootstrap css 将重置 a :visited link style

css - 按下按钮时更改背景行颜色

html - 按钮 :active is not applied when form is submitted

jquery - 如何使用 Jquery 或其他简单操作在创建 View 上隐藏或显示表单组。 ASP.NET MVC 5

asp.net-mvc - ASP NET MVC : Dynamically adding or removing inputs on the form - unobtrusive validation

forms - 将MailChimp订户添加到具有注册表单而不是API的组中