2015-06-22 121 views
0

AM。我也想在移動設備中使用該應用程序。但輸入表單字段會對設備的寬度做出響應。我想在輸入字段寬度爲瀏覽器中的靜態。請諮詢如何做到這一點?使用引導程序3爲我的python Web應用程序使用引導程序3,在引導程序中形成組3 3

下面

是我使用

<div class="container-fluid"> 
<div class="row"> 
<div class="col-lg-12">   
<div class="col-lg-12"> 
    <div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <div class="row"> 
     <div class="col-md-2 pull-left"> 
     Add Timesheet Details 
     </div> 
     <div class="col-md-8 text-center"> 
     <label class="control-label" for="timesheet_no">Time Sheet Number:01</label> 
     </div> 
     </div> 
    </div> 
     <div class="panel-body"> 
     <form id="add_detail" class="form-horizontal" action="" method="post" name="page"> 
      <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1434973923##5ac019cd8821a1dfda978dde3710893c8b0ced33"></div> 
      <div class="form-group"> 
       <div class="repeat" id="dimdetail-fieldset"> 
        <div class="col-md-12"> 
        <div class ="table-responsive"> 
        <table id="table_id" class="wrapper table table-bordered"> 
         <thead> 
         <tr> 
         <th class="col-md-2"><button type="button" class="add btn btn-primary pull-left" id="add_time"><i class="glyphicon glyphicon-plus"></i>&nbsp Time</button></th> 
         </tr> 
         </thead> 
         <tbody class="container"> 
         <tr class="success"> 
          <th class="col-md-2">Project</th> 
          <th class="col-md-2">Total Hours</th> 
          <th class="col-md-2">TPI Inspector Name</th> 
          <th class="col-md-2">Inspection Type</th> 
          <th class="col-md-2">Remarks</th> 
          <th></th> 
         </tr>      
         <tr > 
         <td class="form-group col-md-2"> 
          <select class="form-control" id="timesheet_time_details-0-project_id" name="timesheet_time_details-0-project_id" style="width:100%"><option value="">-- please choose --</option> 
          <option value="12997">12997</option></select> 

         </td> 
         <td class="form-group col-md-2"> 
          <input class="form-control" id="timesheet_time_details-0-total_hours" name="timesheet_time_details-0-total_hours" type="text" value="10.0"> 

         </td> 
         <td class="form-group col-md-2"> 
          <input class="form-control" id="timesheet_time_details-0-tpi_inspector_name" name="timesheet_time_details-0-tpi_inspector_name" type="text" value="Ram"> 

         </td> 
         <td class="form-group col-md-2"> 
          <select class="form-control" id="timesheet_time_details-0-testmethod" name="timesheet_time_details-0-testmethod" style="width:100%"><option value="__None">-- please choose --</option><option selected value="1">UltraSonic Inspection</option></select> 

         </td> 
         <td class="form-group col-md-2"> 
          <textarea class="form-control" id="timesheet_time_details-0-remarks" name="timesheet_time_details-0-remarks" rows="3">ok</textarea> 

         </td> 
         <td class="col-md-1"> 
          <button class="remove btn btn-danger" type="button" id=""><i class='glyphicon glyphicon-trash'></i> Delete</button> 
         </td> 
         </tr> 

         </tbody> 
        </table> 
        </div> 
        </div> 
       </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-md-12"> 
        <div class="row"> 
         <div class="col-md-10 pull-left"> 
         <button class="btn btn-primary" type="submit" value="Save" name="Save"><i class="glyphicon glyphicon-save"></i>&nbsp Save</button> 
         <button class="btn btn-success" type="submit" value="Submit for Approval" name="Save"><i class="glyphicon glyphicon-ok-circle"></i>&nbsp Submit for Approval</button> 
         <button id="delete" class="btn btn-danger" type="submit" value="Delete" name="Save"><i class="glyphicon glyphicon-trash"></i>&nbsp Delete</button> 
         </div> 
        </div> 

        </div> 
       </div> 
     </form> 
    </div> 
    </div> 
</div> 
</div> 
</div> 
</div> 
+0

要刪除只有表單元素的響應性嗎? –

+0

對於表單字段,如輸入select .. – Prasobhraj

+0

在引導中,表單字段始終爲100%寬度。它是具有固定寬度的表格容器(可能使用網格佈局) –

回答

1

添加下面的CSS

.form-control {width:150px} /*the width you want*/ 

確保你的引導CSS後呈現HTML。但是,您正在擺脫包含輸入的行的響應性。

here is a bootply example