プッシュCOL-MD-6のdiv

Question

は、私は次のようなレイアウトがあります。

を、私は強調表示のdivが正しい「座席数」の下に、次の行に移動することにしたいです、だから、 "col-md-offset-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 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> 

に従うよう、行分類divを使用することができます。

Answer 3

最後の位置のプロファイルのプロファイルにちょうどcssを追加するclear：left;