css - 在 bootstrap 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>