无法在带有引导程序的Web表单应用程序中显示内联

时间:2014-01-14 19:51:58

标签: css twitter-bootstrap

我正在自定义带有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>

这就是我试图让它显示内联的所有内容最终看起来像

enter image description here

我希望邮政编码标签和文本框与国家/地区显示在同一行。通常一个简单的任务,但引导程序清除妨碍

1 个答案:

答案 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元素将显示在同一行

我不知道它是否正确,但它对我有用。

在此处查看http://ezmotionq.com/registration