0

input当我像在 ASP.net MVC 中一样设置文本框时，如何设置文本框的长度

<div class="form-group">
       @Html.TextBoxFor(m => m.FirstName, new { style = "width:550px", @class = "form-control" })
   </div>

长度设置为 550px，放在移动显示上文本输入不会缩小。如果我删除 550px，文本输入在屏幕上一直是 100% 长，它会在移动屏幕上调整。

我希望输入的长度合理，为 550 像素，并且我希望它在移动显示器上自动缩小。

有没有办法在 Twitter Bootstrap 的移动显示上自动缩小这个输入框？

4

1 回答 1

0

从 3.0 开始，Bootstrap 是移动优先的。因此，当您不是移动屏幕时，您需要考虑控制尺寸的反向场景。

form-controlwidth: 100%s 希望默认占用，因此通过设置它style，您将覆盖 CSS 行为。

看看我上面链接的例子，你会看到他们建议使用col-*类来控制表单的宽度。这允许表单在仍然在 Bootstrap 方案中工作的同时自动占据更多页面。如果你看看他们是如何做水平表格的，那么你会看到它被充分使用，如下所示。

从它的声音来看，你想要这样的东西：

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-12 col-sm-2 control-label">First Name</label>
        <div class="col-xs-12 col-sm-6">
            @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control" })
        </div>
    </div>
</form>

如果您想弄乱它，我创建了一个等效的JSFiddle 来玩。如果没有form-horizontal，form的控件将折叠以填充任何空间（例如，在所有（或以上）屏幕尺寸col-sm-2中col-sm-6留下 4 个可用列。sm

于 2013-09-29T04:40:55.510 回答