将col 6 div推送到下一行。

Question

我有以下布局：

​

​

我想把突出显示的div移到下一行，就在“座位数”下面，所以我想在它上面加上一个“col偏移-6”就可以了。然而，其结果是：

​

​

代码：

    <div class="col-md-3" style="padding-left: 0; padding-top: 15px;">
        <label class="control-label">@Localizer.GetWebTranslation("Locations", "Number of seats")</label>
        @Html.EditorFor(model => model.NumberOfSeats, new { htmlAttributes = new { @class = "form-control", @style = "width: 70px", @data_bind = "value : NumberOfSeats" } })
    </div>
    <div class="col-md-3" style="padding: 0; padding-top: 30px">
        <input data-bind="checked: Terrace" id="checkbox-4" class="checkbox-custom" name="checkbox-4" type="checkbox">
        <label for="checkbox-4" class="checkbox-custom-label control-label">@Localizer.GetWebTranslation("Products", "Terrace")</label>
    </div>
    <div class="col-md-6" style="padding-right: 0; padding-left: 15px; padding-top: 15px">
        <label class="control-label">@Localizer.GetWebTranslation("LocationProfile", "Location Profiles")</label>
        <input class="form-control" id="profilesAutocomplete" data-bind="textInput: $root.SelectedProfileName" placeholder="@Localizer.GetWebTranslation("Locations", "Search.. (e.g. Catering, Vinery)")" />
    </div>

怎样才是正确的方法呢？

Answer 1

可以使用行类div，如下所示

<div class="row">
   <div id="city" class="col-md-6"></div>
   <div id="country" class="col-md-6"></div>
   .
   .
   .
   <div id="NumberOfSeats" class="col-md-6"></div>
</div>
<div class="row">
   <div id="LocationProfiles" class="col-md-6"></div>
</div>

Answer 2

<div class="row">
   <div class="col-md-6"> City </div>
   <div class="col-md-6">country</div>
</div>
<div class="row">
   <div class="col-md-6"> Street Name</div>
   <div class="col-md-6">Zip Code</div>
</div>  
<div class="row">
   <div class="col-md-6"> Email</div>
   <div class="col-md-6">Phone</div>
</div>  .
<div class="row">
   <div class="col-md-3">Number Of seat</div>
   <div class="col-md-3">Terrace</div>
   <div class=col-md-6"></div>`**...(optional)**`
</div>
<div class="row">
   <div class="col-md-6">Location profile</div>
</div>

这是使用引导程序构造此表单的正确方法。

Answer 3

在位置剖面的最后，只添加css清晰:左；