html - Twitter Bootstrap 减少井和字段宽度

Question

我在网上找到了一些注册表格的代码，我试图根据自己的需要对其进行调整。

我正在尝试缩小孔的宽度，但我注意到 <div class="well well-sm">和 <div class="well">不会改变井的大小。

设置一个固定的，例如<div class="well" style="width: 600px">使井在页面上左对齐而不是居中，这正是我想要的。如何缩小孔宽？

此外，固定文本字段宽度以防止它们在浏览器折叠/增长时变得太宽的正确方法是什么？

Demo.

Answer 1

well-sm 并没有太大的不同，因为它并不是要如此大幅度地改变比例，而只是为了在形式上产生微小的差异。您可以添加一个 width 值，但要使其居中，您还必须添加 margin: 0 auto;。这是一个 fiddle showing what I mean .

关于调整文本框大小:问题是您使用的元素 (col-sm-6) 将宽度设置为 50%，但这仅在浏览器的宽度至少为 768px，请查看以下 CSS:

@media (min-width: 768px) //for this to work, at least 768px are needed
.col-sm-6 {
width: 50%;
}

当你的宽度小于 768px 时，第二个类 (col-xs-12) 被激活。这需要 100% 的宽度。如果您改用 col-xs-6，它将调整为 50%。所以您需要做的是将包含文本字段的类从 col-sm-6 col-xs-12 更改为 col-sm-6 col-xs-6.