Question

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

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

下面的代码（它的所有1个区块，但我在此处将问题发布为1）

由于

修改 bootply在这里：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 =＆＃34; form-control＆＃34;，.placeholder =＆＃34; Email Address＆＃34;}） @ Html.ValidationMessageFor（Function（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

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

1 个答案: