Bootstrap 移动宽度时表单布局不正确

Question

我正在使用 bootstrap v3.2.0 并尝试构建一个联系人表单，其字体很棒的图标与输入字段的左侧对齐。除了移动设备（大约 < 400 像素）之外，它在大多数宽度下都呈现良好，它将图标放置在输入框上方的线上。有人可以指出我正确的方向吗？我看过的 @media css 中没有一个是 400px 左右，所以我很困惑。

我还不能 post 图片，这里是 link 问题的屏幕截图： https://www.dropbox.com/sh/rwnt8eeycpqlijx/AABCdhF2oRUG50mATrin_meYa?dl=0

下面的代码（全是 1 个块，但我遇到了问题 post 将其作为 1 放在此处）

谢谢

编辑在这里启动：http://www.bootply.com/WvUOSOyYaA

    <div class="row">
    <div class="col-xs-12">
           @Using Html.BeginForm("Contact", "Home", FormMethod.Post, New With {.enctype = "multipart/form-data", .class = "form-horizontal"})
               @<fieldset>
<legend class="header">Contact Me</legend>

<div class="form-group">
    <div class="col-xs-1">
    </div>
    <div class="col-xs-1">
        <i class="fa fa-user fa-2x pull-right"></i>
    </div>
    <div class="col-xs-10">
        @Html.TextBoxFor(Function(m) m.FullName, New With {.class = "form-control pull-left", .placeholder = "Full Name"})
        @Html.ValidationMessageFor(Function(m) m.FullName)
    </div>
</div>
<div class="form-group">
    <div class="col-xs-1">
        </div>
    <div class="col-xs-1">
        <i class="fa fa-envelope-o fa-2x pull-right"></i>
        </div>

@Html.TextBoxFor(Function(m) m.EmailAddress, New With {.class = "form-control", .placeholder = "Email Address"}) @Html.ValidationMessageFor(函数(m) m.EmailAddress)

</div>
<div class="form-group">
    <div class="col-xs-1">
    </div>
    <div class="col-xs-1">
        <i class="fa fa-wifi fa-2x pull-right"></i>
    </div>
    <div class="col-xs-10">
        @Html.TextBoxFor(Function(m) m.IPAddress, New With {.class = "form-control", .disabled = "disabled"})
    </div>
</div>
<div class="form-group">
    <div class="col-xs-1">
    </div>
    <div class="col-xs-1">
        <i class="fa fa-pencil-square-o fa-2x pull-right"></i>
    </div>
    <div class="col-xs-10">
        @Html.TextAreaFor(Function(m) m.Message, New With {.class = "form-control", .placeholder = "Enter your message for me here & I will get back to you asap..", .rows = "7"})
        @Html.ValidationMessageFor(Function(m) m.Message)
    </div>
</div>
<div class="form-group">
    <div class="col-xs-1">
    </div>
    <div class="col-xs-1">
    </div>
    <div class="col-xs-10">
        <button type="submit" class="btn btn-default btn-lg">Submit</button>
    </div>
</div>

结束使用

Answer 1

@Html.TextAreaFor 可能正在添加一个设置最小宽度（有效）的 cols 属性。我认为默认值是 20 列 ... 请参阅 Disable cols with TextAreaFor

Bootstrap 移动宽度时表单布局不正确

Bootstrap form layout incorrect when mobile width

html

css

asp.net-mvc

twitter-bootstrap-3