我正在自定义带有bootstrap css格式的新VS 2013 Web应用程序的帐户注册部分。我正在尝试在页面上构建一个表单,并且不能让一个部分显示内联而不是块。最新的尝试如下。
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="ddlCountry" CssClass="col-md-2 control-label">Country</asp:Label>
<div class="col-md-10">
<asp:DropDownList runat="server" ID="ddlCountry" CssClass="form-control" Width="200" />
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="tbPostalCode" CssClass="col-md-2 control-label">Postal Code</asp:Label>
<div class="col-md-10-inline">
<asp:TextBox runat="server" ID="tbPostalCode" CssClass="form-control" Width="200" MaxLength="10" Height=" " />
<asp:RequiredFieldValidator runat="server" ControlToValidate="ddlCountry"
CssClass="text-danger" ErrorMessage="The country field is required." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="tbPostalCode"
CssClass="text-danger" ErrorMessage="The postal code field is required." />
</div>
</div>
</div>
</div>
这就是我试图让它显示内联的所有内容最终看起来像
我希望邮政编码标签和文本框与国家/地区显示在同一行。通常一个简单的任务,但引导程序清除妨碍
答案 0 :(得分:1)
我为实现这一点所做的是将每个表单控件写在一个单独的行中。即,
<form role="form">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter email">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" class="form-control" id="lname" placeholder="Enter Last Name">
</div>
</div>
</div>
</form>
在上面的代码中,First Name和Last Name元素将显示在同一行
中我不知道它是否正确,但它对我有用。