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是上述

的一个示例

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

bootstrap pull-right类和行类

3 个答案: