Question

我使用twitter bootstrap表单类来创建表单。我使用了form-horizontal，form-group，col- *和form-control类，如下面的代码所示。问题是，当我有一个select标签块和一个输入标签块时，输入标签之间的空间大于select标签中的空间。这种形式外观不均匀。我试过重写这个课程;

.form-group {
  margin-bottom: 15px;
}

要 form-group { margin-bottom：10px; // less margin-bottom }

但这会减少选择和输入标签的空间。我可以使用自定义css类来减少输入之间的空间，但我想了解为什么Bootstrap以这种方式运行。这是我的代码;

<div class="row">
  <div class="col-xs-12 col-sm-7">

    <div class="form-group form-group-sm">
      <div class="col-xs-12 col-sm-3 col-md-2">
        <label class="label control-label " for="DropDownListAccountFromDirectDebit">
                                    Account From</label>
      </div>
      <div class="col-xs-12 col-sm-4 col-md-5">
        <asp:DropDownList ID="DropDownListAccountFromDirectDebit" runat="server" CssClass=" form-control" AppendDataBoundItems="true" AutoPostBack="True">
          <asp:ListItem Text="08409876556" Value="08409876556"> </asp:ListItem>
          <asp:ListItem Text="08467659594" Value="08467659594"> </asp:ListItem>
        </asp:DropDownList>
      </div>
      <div class="col-xs-12 col-sm-3 col-md-2">
        <label class="label control-label " for="LabelCurrencyFromDirectD">
                                    Currency:</label>
      </div>
      <div class="col-xs-12 col-sm-2 col-md-3">
        <asp:Label ID="LabelCurrencyFromDirectD" runat="server" Text="USD"></asp:Label>
      </div>
    </div>
    <div class="form-group form-group-sm">
      <div class="col-xs-12 col-sm-3 col-md-2">
        <label class="label control-label " for="DropDownListAccountTODirectD">
                                    Account to pay</label>
      </div>
      <div class="col-xs-12 col-sm-4 col-md-5">
        <asp:DropDownList ID="DropDownListAccountTODirectD" runat="server" CssClass=" form-control" AppendDataBoundItems="true" AutoPostBack="True">
          <asp:ListItem Text="LHO-002-067484000-02" Value="08409876556"> </asp:ListItem>
          <asp:ListItem Text="LHO-002-067484000-02" Value="08467659594"> </asp:ListItem>
        </asp:DropDownList>
      </div>
      <div class="col-xs-12 col-sm-3 col-md-2">
        <label class="label control-label " for="CurrencyToDirectD">
                                    Currency:</label>
      </div>
      <div class="col-xs-12 col-sm-2 col-md-3">
        <asp:Label ID="CurrencyToDirectD" runat="server" Text="USD"></asp:Label>
      </div>
    </div>
    <div class="form-group form-group-sm">
      <div class="col-xs-12 col-sm-3 col-md-2">
        <label class="label control-label " for="TxtAmountDirectD">
                                    Amount</label>
      </div>
      <div class="col-xs-12 col-sm-4 col-md-5">
        <asp:TextBox ID="TxtAmountDirectD" runat="server" CssClass="form-control " AutoPostBack="false"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TxtAmountDirectD" ErrorMessage="Please Amount" Font-Bold="True" Font-Size="Large" SetFocusOnError="True" ValidationGroup="DirectD" Width="8px">*</asp:RequiredFieldValidator>
      </div>
      <div class="col-xs-12 col-sm-3 col-md-2">
        <label class="label control-label " for="CurrencyDirectD">
                                    Currency:</label>
      </div>
      <div class="col-xs-12 col-sm-2 col-md-3">
        <asp:Label ID="CurrencyDirectD" runat="server" Text="USD"></asp:Label>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-5">

    <div class="form-group form-group-sm">
      <div class="col-xs-12 col-sm-6 col-md-5">
        <label class="label control-label " for="TxtStartDateDirectD">
                                    Start Date</label>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-7">
        <asp:TextBox ID="TxtStartDateDirectD" runat="server" CssClass="form-control " AutoPostBack="false" type="date"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="TxtStartDateDirectD" ErrorMessage="Please Amount" Font-Bold="True" Font-Size="Large" SetFocusOnError="True" ValidationGroup="DirectD" Width="8px">*</asp:RequiredFieldValidator>
      </div>
    </div>
    <div class="form-group form-group-sm ">
      <div class="col-xs-12 col-sm-6 col-md-5">
        <label class="label control-label " for="TxtEndDateDirectD">
                                    End Date</label>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-7">
        <asp:TextBox ID="TxtEndDateDirectD" runat="server" CssClass="form-control form-fixer" AutoPostBack="false" type="date"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="TxtEndDateDirectD" ErrorMessage="Please Amount" Font-Bold="True" Font-Size="Large" SetFocusOnError="True" ValidationGroup="DirectD" Width="8px">*</asp:RequiredFieldValidator>
      </div>
    </div>
    <div class="form-group form-group-sm">
      <div class="col-xs-12 col-sm-6 col-md-5">
        <label class="label control-label " for="TxtChargeDateDirectD">
                                    Charge Date</label>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-7">
        <asp:TextBox ID="TxtChargeDateDirectD" runat="server" CssClass="form-control " AutoPostBack="false" type="date"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ControlToValidate="TxtChargeDateDirectD" ErrorMessage="Please Amount" Font-Bold="True" Font-Size="Large" SetFocusOnError="True" ValidationGroup="DirectD" Width="8px">*</asp:RequiredFieldValidator>
      </div>
    </div>
  </div>
</div>

Output for select tags

Output for input tags

在使用twitter引导程序表单类时，为什么输入标记之间的空间比选择标记更多？

0 个答案: