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

Question

我正在使用 bootstrap v3.2.0 并尝试构建一个联系人表单，其字体真棒图标与输入字段的左侧对齐。除了将图标放置在输入框上方的行上的移动设备（大约

我还不能发布图片，这里是问题截图的链接： https://www.dropbox.com/sh/rwnt8eeycpqlijx/AABCdhF2oRUG50mATrin_meYa?dl=0

下面的代码（全部为 1 块，但我在此处将其发布为 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, 新的 {.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 cols ...见Disable cols with TextAreaFor