html - 将 div 与左浮动对齐

Question

我在 html.beginform 中有 asp.net 中的代码示例:

<div>
    <div style="float:left; width:50%">
        @Html.LabelFor(m => m.Symbol)
        @Html.TextBoxFor(m => m.Symbol, new { @class = "form-control-inline" })
        @Html.ValidationMessageFor(m => m.Symbol)
    </div>
    <div>
        @Html.LabelFor(m => m.Side)
        @Html.EnumDropDownListFor(m => m.Side, "Select", new { @class = "form-control-inline" })
        @Html.ValidationMessageFor(m => m.Side)
    </div>
</div>
<div>
    <div style="float:left; width:50%">
        @Html.LabelFor(m => m.Side)
        @Html.EnumDropDownListFor(m => m.Side, "Select", new { @class = "form-control-inline" })
        @Html.ValidationMessageFor(m => m.Side)
    </div>
    <div>
        @Html.LabelFor(m => m.Quantity)
        @Html.TextBoxFor(m => m.Quantity, new { @class = "form-control-inline" })
        @Html.ValidationMessageFor(m => m.Quantity)
    </div>
</div>
<div @*id="forLimit" hidden*@>
    <div style="float:left; width:50%;">
        @Html.LabelFor(m => m.Symbol)
        @Html.TextBoxFor(m => m.Symbol, new { @class = "form-control-inline" })
        @Html.ValidationMessageFor(m => m.Symbol)
    </div>
    <div>
        @Html.LabelFor(m => m.Symbol)
        @Html.TextBoxFor(m => m.Symbol, new { @class = "form-control-inline" })
        @Html.ValidationMessageFor(m => m.Symbol)
    </div>
</div>
<br />
<button type="submit" class="btn btn-primary">Save</button>

和 @class = "form-control-inline" 的 CSS

.form-control-inline {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 50%;
}

我不知道为什么最后一个 div 的文本框被分成两行。 First 在第三行，但在第二列(应该在第一列)，因此 second 移到了第四行。

Answer 1

您可以使用下面的 html 结构来解决您的问题

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

<div class="row">
  <div class="col-md-6 col-xs-6">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="col-md-6 col-xs-6">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control">
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-xs-6">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="col-md-6 col-xs-6">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control">
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-xs-6">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="col-md-6 col-xs-6">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control">
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6 col-xs-6">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="col-md-6 col-xs-6">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control">
    </div>
  </div>
</div>

</div>