css - Twitter Bootstrap 输入在 row-fluid 上附加中断

Question

我正在使用 Twitter Bootstrap 以及它们的响应式风格。我在输入附加和在输入末尾添加“%”时遇到了一些问题。我意识到从“row-fluid”中删除“-fluid”可以解决问题。

1. 在 div.container-fluid 中使用 div.row 可以吗？
2. 这怎么能解决：http: //jsfiddle.net/zhenghao1/svrec/

提前谢谢大家！

Answer 1

一种快速的方法是将 浮动input到左侧。将以下内容添加到您的 style.css 并span2从输入中删除该类（改用 % 或固定宽度）。

.input-append input { float:left; width:10% }

此外，除了 bootstrap.css 之外，请务必包含 bootstrap-responsive.css 以确保根据您的视口正确调整所有内容的大小。

http://jsfiddle.net/eterpstra/eXVuM/ （默认情况下，当屏幕尺寸缩小到 < 768px 时，表单会切换到“垂直”方向。这就是为什么如果 jsFiddle 窗口太大，您会看到标签翻转到顶部的原因狭窄的。）