引导拉-右类和行类

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元素。它还生成-按钮以动态删除表单。问题是-和+因为它们都被拉到了正确的位置，它们出现在同一行。我不想那样。引导程序中的row类是否都清除了？这里是上面的一个引导示例

Answer 1

可以将另一个行元素添加到-按钮中。

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

Answer 2

您可以在右拉元素之后使用<div class="clearfix" />。这样就行了。

Answer 3

在下面的引导语法中:您需要在一个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