Twitter Bootstrap减少了井和场宽

时间:2014-05-18 22:57:57

标签: html css twitter-bootstrap

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

我正在努力缩小井宽,但我注意到<div class="well well-sm"><div class="well">不会改变井的大小。

设置固定,例如<div class="well" style="width: 600px">使页面左侧对齐,而不是将其居中,这就是我想要的。如何使井宽变小?

另外,修复文本字段宽度的正确方法是什么,以防止它们在浏览器崩溃/增长时变得太宽?

Demo.

1 个答案:

答案 0 :(得分: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