javascript - bootstrap pull-right 类和行类

Question

我有以下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是上面的bootply例子

Answer 1

您可以向 - 按钮添加另一个行元素

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