Question

我在html中使用bootstrap在面板中有一个表单，看起来我的所有面板都调整得很好，除了有日期和用于上传文件的面板。它们的宽度比其他表单组宽，因为它们旁边有按钮。所以我的问题是如何修改它以获得与其他表单组相同的宽度。

<div class="  col-md-6 col-sm-6   ">
  <div class="panel panel-default">
      <div class="panel-heading">
        <div class="row">
          <div class="  col-md-3 col-sm-3 col-xs-3  ">
             <font size="4" ></font>
          </div>
          <div class="  col-md-8 col-sm-8 col-xs-8  ">
             <font size="6" >إضافـــــة أرشيــــف </font>
          </div>
        </div>
      </div>
    <br>
    <form class="form-horizontal" id="form" action="/insertArchive/" method="post"  enctype="multipart/form-data">{% csrf_token %}

      <div class="form-group">
        <label class="col-sm-4 control-label">إســـم اﻷرشيف</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" name="name" id="name">
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4 control-label">الرقم اﻹشاري</label>
        <div class="col-sm-6">
          <input type="text" class="form-control" name="ref_num" id="ref_num">
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
        <div class="col-sm-6">
          <div class="form-group">
            <div class='input-group date' id='datetimepicker5'>
              <!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
              <input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4 control-label">المجلد</label>
        <div class="col-sm-6">
          <select class="form-control" name="section_id" id="section_id">
            {% for sectidon in list %}
                <option value="{{sectidon.id}}">{{sectidon.name}}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-4 control-label">ملاحظات</label>
        <div class="col-sm-6">
          <textarea class="form-control" rows="3" name="text" id="text"></textarea>
        </div>
      </div>

      <!-- test -->
      <div class="form-group">
        <label class="col-sm-4 control-label">الملحقات</label>
            <div class="contacts col-sm-6">
                <label>إصافة ملف :</label>
                    <div class="form-group multiple-form-group input-group file">
                        <input type="file" name="file[]" class="form-control" >
                        <input type="text" name= "file_name[]" class="form-control" >
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-success btn-add">+</button>
                        </span>
                    </div>
                </div>
            </div>
      </div>
      <!-- test -->

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary">حفـــظ</button>
        </div>
      </div>

    </form>
  </div>
</div>

Answer 1

您的问题是，.form-group内有.form-group个班级。

所以改变：

<div class="form-group">
        <label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
        <div class="col-sm-6">
          <div class="form-group">
            <div class='input-group date' id='datetimepicker5'>
              <!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
              <input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
      </div>

为：

<div class="form-group">
        <label class="col-sm-4 control-label">تاريخ اﻹصدار</label>
        <div class="col-sm-6">
            <div class='input-group date' id='datetimepicker5'>
              <!-- data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" -->
              <input type='text' class="form-control" data-date-format="YYYY/MM/DD" name="real_date" id="real_date">
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>

Working example

表单中的html输入在宽度上不匹配

1 个答案: