表格中的html輸入在寬度上不匹配

-1

我在使用引導程序的html中的面板中有一個窗體，它看起來好像我所有的面板都調整得很好，除了那個有日期和用於上傳的面板文件在裏面。由於其旁邊的按鈕，它們的寬度比其他窗體組寬。所以我的問題是我如何修改它以獲得與其他表單組相同的寬度。表格中的html輸入在寬度上不匹配

<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>

來源

2015-02-09 Anas Baheh

你可以提供一個小提琴嗎？ – 2015-02-09 09:52:47

'col-md-3 col-sm-3 col-xs-3'非常多餘！有關詳細信息，請參閱https://github.com/twbs/bootlint/wiki/E029。 – cvrebert 2015-02-09 18:28:24

你的問題是，你有一個.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

來源

2015-02-09 11:24:18 Sebsemillia

謝謝你，先生，它運作良好 – 2015-02-09 12:43:53

表格中的html輸入在寬度上不匹配

回答

相關問題