Question

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

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

长度设置为550px，移动显示文本输入不缩小。如果我删除550px，文本输入在整个屏幕上都是100％长，并在移动屏幕上进行调整。

我希望输入的合理长度为550px，我想让它在移动显示屏上自动缩小。

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

Answer 1

从3.0开始，Bootstrap首先是移动设备。因此，当您不移动屏幕时，您需要考虑控制大小调整的相反方案。

form-controls want to take up width: 100% by default，因此通过设置style，您将覆盖CSS行为。

看看我上面链接的示例，您将看到他们建议使用col-*类来控制表单的宽度。这允许表单在仍然在Bootstrap方案中工作时自动占用更多页面。如果您look at how they do horizontal forms，那么您将在下面显示时充分利用它。

从它的声音来看，你想要的是：

<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 to play around。如果没有form-horizontal，form的控件将折叠以填充任何空格（例如，col-sm-2和col-sm-6会在sm所有列中留下4个可用列（或以上）屏幕尺寸。

Bootstrap文本输入长度自动调整

1 个答案: