在引导 css 中，我想使用表单元素来很好地调整网格布局

Question

我在这里遇到了问题。如果我保留 form-control 类应用，我可以在键入时看到密码字符（它设置字体前景和背景），但它还将宽度设置为 100%，这使得输入控件太宽。如果它删除了form-control 类，那么我就看不到输入，并且我失去了文本中漂亮的填充效果。有没有干净的方法来解决这个问题？

旧的解决方法是在输入中添加 style="width:100px"。不过，这会破坏小屏幕。我真的需要网格来代替。

            <div>
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                    <input 
                        name="sp" type="password" 
                        class="form-control" 
                        required ng-minlength="9" ng-maxlength="255" />
                </div>
                <div class="col-sm-4"></div>
            </div>

参考：http://getbootstrap.com/css/#code

这是一个很好的指南，但似乎所有示例都使用完全展开的输入元素，其中两侧都有另一个可见的输入元素。我在网格中使用空元素来占用空间（以居中）输入。 http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

Answer 1

在这个例子中，为什么不对输入字段应用max-width css 规则。

@media (min-width: 786px) {
    input[name="sp"] {
        min-width: 100px;
    }
}

如果您将此规则包装在媒体查询中，您将能够控制小型、中型和大型布局的大小，同时确保它在移动设备上仍然看起来不错。

除了使用空的<div class="col-sm-4"></div>，你也可以这样做

<div class="col-sm-4 col-sm-offset-4"></div>