引導拉正確的類和行類

我有以下的HTML引導拉正確的類和行類

<form action="/customer/images/1/upload_xray" method="post" id="xrayform" enctype="multipart/form-data"> 
    <input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="2"> 
    <input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="0"> 
    <input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000"> 
    <input type="hidden" name="csrfmiddlewaretoken" value="LI1L39J1C7P4tQeqfJhL5CBuW283FmOI"> 
    <div class="form-group"> 
     <label for="date">Date</label> 
     <input id="date" type="text" name="date" class="form-control input-sm datepicker input-append date" readonly=""> 
    </div> 
    <div class="form-group"> 
     <label for="id_title">Title</label> 
     <select class="form-control input-sm" id="id_title" name="title"> 
     <option value="" selected="selected">---------</option> 
      <option value="Observation">Observation</option> 
      <option value="Initial">Initial</option> 
      <option value="Progress">Progress</option> 
      <option value="Final">Final</option> 
      <option value="Post Treatment">Post Treatment</option> 
     </select> 
    </div> 

    <hr class="divider"> 
    <div class="form-wrapper"> 
     <div class="form-group"> 
      <label for="id_form-0-image">Image</label> 
      <input id="id_form-0-image" name="form-0-image" type="file"> 
     </div> 
     <div class="form-group"> 
      <label for="id_form-0-type">Type</label> 
      <select class="form-control input-sm" id="id_form-0-type" name="type"> 
       <option value="" selected="selected">---------</option> 
       <option value="xray">X-ray Image</option> 
       <option value="internal">Intraoral Image</option> 
       <option value="external">Extra-oral Image</option> 
       <option value="model">Model</option> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label for="id_form-0-desc">Desc</label> 
      <select class="form-control input-sm" id="id_form-0-desc" name="form-0-desc"> 
       <option value="" selected="selected">---------</option> 
       <optgroup label="Xray"> 
       <option value="PA Ceph">PA Ceph</option> 
       <option value="Lateral Ceph">Lateral Ceph</option> 
       <option value="Panoramic">Panoramic</option> 
       </optgroup><optgroup label="Interior oral"> 
       <option value="Anterior Occlution">Anterior Occlution</option> 
       <option value="Anterior Occlusion Relaxed">Anterior Occlusion Relaxed</option> 
       <option value="Overjet Right">Overjet Right</option> 
       <option value="Overjet Left">Overjet Left</option> 
       <option value="Right Occlusion">Right Occlusion</option> 
       <option value="Left Occlusion">Left Occlusion</option> 
       <option value="Upper Occlusal">Upper Occlusal</option> 
       <option value="Lower Occlusal">Lower Occlusal</option> 
       <optgroup label="External oral"> 
       <option value="Frontal">Frontal</option> 
       <option value="Lateral Right">Lateral Right</option> 
       <option value="Lateral Left">Lateral Left</option> 
       <option value="Oblique smile Right">Oblique smile Right</option> 
       <option value="Oblique smile Left">Oblique smile Left</option> 
       <option value="Frontal smile">Frontal smile</option> 
       <option value="Oblique Right">Oblique Right</option> 
       <option value="Oblique Left">Oblique Left</option> 
       <optgroup label="Model"> 
       <option value="Model Upper Occlusal">Model Upper Occlusal</option> 
       <option value="Model Lower Occlusal">Model Lower Occlusal</option> 
       <option value="Model Right Buccal">Model Right Buccal</option> 
       <option value="Model Left Buccal">Model Left Buccal</option> 
       <option value="Model Anterior Dental">Model Anterior Dental</option> 
      </select> 
     </div> 
    </div> 
    <div class="form-wrapper">         
     <div class="form-group"> 
      <label for="id_form-2-image">Image</label> 
      <input id="id_form-2-image" name="form-2-image" type="file"> 
     </div> 
     <div class="form-group"> 
      <label for="id_form-2-type">Type</label> 
      <select class="form-control input-sm" id="id_form-2-type" name="form=2-type"> 
       <option value="" selected="selected">---------</option> 
       <option value="xray">X-ray Image</option>\ 
       <option value="internal">Intraoral Image</option> 
       <option value="external">Extra-oral Image</option> 
       <option value="model">Model</option> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label for="id_form-2-desc">Desc</label> 
      <select class="form-control input-sm" id="id_form-2-desc" name="form-2-desc"> 
       <option value="" selected="selected">---------</option> 
       <optgroup label="Xray"> 
       <option value="PA Ceph">PA Ceph</option> 
       <option value="Lateral Ceph">Lateral Ceph</option> 
       <option value="Panoramic">Panoramic</option> 
       <optgroup label="Interior oral"> 
       <option value="Anterior Occlution">Anterior Occlution</option> 
       <option value="Anterior Occlusion Relaxed">Anterior Occlusion Relaxed</option> 
       <option value="Overjet Right">Overjet Right</option> 
       <option value="Overjet Left">Overjet Left</option> 
       <option value="Right Occlusion">Right Occlusion</option> 
       <option value="Left Occlusion">Left Occlusion</option> 
       <option value="Upper Occlusal">Upper Occlusal</option> 
       <option value="Lower Occlusal">Lower Occlusal</option> 
       <optgroup label="External oral"> 
       <option value="Frontal">Frontal</option> 
       <option value="Lateral Right">Lateral Right</option> 
       <option value="Lateral Left">Lateral Left</option> 
       <option value="Oblique smile Right">Oblique smile Right</option> 
       <option value="Oblique smile Left">Oblique smile Left</option> 
       <option value="Frontal smile">Frontal smile</option> 
       <option value="Oblique Right">Oblique Right</option> 
       <option value="Oblique Left">Oblique Left</option> 
       <optgroup label="Model"> 
       <option value="Model Upper Occlusal">Model Upper Occlusal</option> 
       <option value="Model Lower Occlusal">Model Lower Occlusal</option> 
       <option value="Model Right Buccal">Model Right Buccal</option> 
       <option value="Model Left Buccal">Model Left Buccal</option> 
       <option value="Model Anterior Dental">Model Anterior Dental</option> 
      </select> 
     </div> 
     <button class="btn btn-danger btn-sm pull-right" id="2">-</button>        
    </div> 
</form> 
<div class="row"> 
    <button class="btn btn-success btn-sm pull-right">+</button> 
</div>

+按鍵增加使用JavaScript動態新的表單字段div.form-wrapper元素中的另一個。它還會生成 - 按鈕以動態刪除表單。問題在於 - 和+，因爲它們都拉到正確的位置，它們出現在同一行上。我不想那樣。在bootstrap中不排類清除兩個？ Here是以上的一個例子。

來源

2014-02-26 Apostolos

加上'clearfix div'其中'clears'的'floating' – Arjun

你可以另一行元素添加到 - 按鈕

<div class="row"> 
<button class="btn btn-danger btn-sm pull-right" id="2">-</button> 
</div>

來源

2014-02-26 10:01:27

您可以在拉出右元素後使用 <div class="clearfix" />。這應該做到這一點。

來源

2014-02-26 09:59:15 myTerminal

在以下引導語法：你需要有一個col在row。

這不是你的+按鈕情況：

添加col-xs-12 DIV：

<div class="row"> 
    <div class="col-xs-12"> 
    <button class="btn btn-success btn-sm pull-right">+</button> 
    </div> 
</div>

Bootply：http://www.bootply.com/116837

來源

2014-02-26 10:03:30 pbenard

謝謝你回答這個問題，你的答案也是如此 – Apostolos

引導拉正確的類和行類

回答

相關問題