3

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

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

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

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

或多或少正确对齐表单上的视觉元素

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

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

我正在使用 ASP.NET MVC 来生成这种表单的大部分内容，因此@Html.TextBoxFor在标记中进行了很多调用，但是，我发布了一个 JSFiddle，其中包含部分相关的渲染标记，突出显示了问题：

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

我确定我对此采取了完全错误的方法，但是我不是设计师，所以我正在努力调整当前的标记以实现我所追求的。有人可以帮忙吗？

4

2 回答 2

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

​</p>

于 2012-10-23T10:42:46.800 回答
0

好吧，经过一番折腾，我相信我找到了解决方案！

这是一个更新的 JSFiddle：

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

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

非常感谢LiverpoolsNumber9和Sherbrow帮助我找到解决方案。

我的解决方案的关键是删除需要附加图标的输入元素周围的元素span3上的类（将其保留在适当的位置会导致各种奇怪而奇妙的问题），然后还要包装输入元素和图标元素在一个额外的和使用和类以确保图标放置并固定在输入框的右侧。spanspandivinput-appendadd-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 的地方，我仍然觉得很像这样！

于 2012-10-24T08:34:24.267 回答