左浮动的Allign 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>

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

.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的文本框分为两行。 第一行在第三行中，但在第二列中（应在第一列中），因此第二行移至第四行。

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>