2015-02-05 29 views
0

我有形式是這樣的:Bootstrap:如何避免表單輸入的響應性?

enter image description here

如果我縮小顯示尺寸大於寬度的一半我得到這個。

enter image description here

我怎麼能禁用此行爲在默認嗎?

感謝您的任何建議。

編輯:

模板的代碼形式:

<div class="container customContainer" id="workerDetail" data-ng-controller="LocationsCtrl" 
    ng-init="initEmptyLocation();" 
    xmlns="http://www.w3.org/1999/html"> 
    <!-- DEBUG DIV --> 
    <div class="debugDiv" ng-show="$root.debugable == true"> 
    {{locationDetail}} 
    </div> 

    <div class="page-header"> 
    <ul class="pager"> 
     <li class="previous"><a href="/#locations">&larr; </a></li> 
     <li class="previous"><a class="savecstbtn"> 
     <button 
      type="button" 
      class="btn btn-xs savecstbtn btn-link" 
      ng-click="createLocation(locationDetail)" 
      ng-disabled="locationForm.$invalid" 
      > 
      {{ 'SAVE' | translate }} 
     </button> 
     </a> 
     </li> 
    </ul> 
    <h1 class="savecstbtnHeading">{{ 'NEW_LOCATION' | translate }} </h1> 

    </div> 


    <ul class="nav nav-tabs"> 
    <li class="active"><a data-target="#home" data-toggle="tab">{{ 'INFO' | translate }}</a></li> 
    <!--<li><a data-target="#activities" data-toggle="tab">{{ 'PROJECTS' | translate }}</a></li>--> 
    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    <!-- USER DETAIL --> 
    <div class="tab-pane active" id="home"> 
     <div class="row detailPaddingTop"> 
     <form role="form" name="locationForm" id="locationForm" class="detailForm"> 
      <!-- USER EDIT FORM PART 0 --> 
      <div class="col-md-3 column"> 
      <div class="form-group"> 
       <label for="city">{{ 'ADDRESS_CITY' | translate }} </label> 
       <input type="text" ng-model="locationDetail.address.city" class="form-control" id="city"/> 
      </div> 
      <div class="form-group"> 
       <label for="street">{{ 'ADDRESS_STREET' | translate }} </label> 
       <input type="text" ng-model="locationDetail.address.street" class="form-control" id="street"/> 
      </div> 
      <div class="form-group"> 
       <label for="streetNumber">{{ 'ADDRESS_STREET_NO' | translate }}</label> 
       <input type="text" ng-model="locationDetail.address.streetNumber" class="form-control" id="streetNumber"/> 
      </div> 
      <div class="form-group"> 
       <label for="district">{{ 'ADDRESS_DISTRICT' | translate }}</label> 
       <input type="text" ng-model="locationDetail.address.district" class="form-control" id="district"/> 

      </div> 
      <div class="form-group col-md-6"> 
       <label for="latitude" class="">{{ 'ADDRESS_LAT' | translate }} {{ '*' | translate }}</label> 
       <input type="text" ng-model="locationDetail.address.latitude" 
        class="form-control gpsLat" 
        id="latitude" required/> 
      </div> 
      <div class="form-group col-md-6"> 
       <label for="longitude">{{ 'ADDRESS_LON' | translate }} {{ '*' | translate }}</label> 
       <input type="text" ng-model="locationDetail.address.longitude" 
        class="form-control gpsLon" 
        id="longitude" required/> 
      </div> 
      </div> 


      <!-- USER EDIT FORM PART 2 --> 
      <div class="col-md-3 column"> 
      <div class="form-group"> 
       <label for="siteId">{{ 'SITEID' | translate }} {{ '*' | translate }}</label> 
       <input type="text" ng-model="locationDetail.siteId" 
        class="form-control" id="siteId" required/> 
      </div> 
      <div class="form-group"> 
       <label for="shared">{{ 'SHARED' | translate }}</label> 
       <select id="shared" ng-model="locationDetail.shared" class="form-control"> 
       <option value="true">{{ 'YES' | translate }}</option> 
       <option value="false">{{ 'NO' | translate }}</option> 
       </select> 
      </div> 
      <div class="form-group"> 
       <label for="sapSacIrnCode">{{ 'SAPSACIRNCODE' | translate }}</label> 
       <input type="text" ng-model="locationDetail.sapSacIrnCode" class="form-control" id="sapSacIrnCode"/> 
      </div> 
      <div class="form-group"> 
       <label for="stationType">{{ 'STATION_TYPE' | translate }} {{ '*' | translate }}</label> 
       <input kendo-auto-complete 
        required 
        ng-minlength=1 
        id="stationType" 
        class="form-control" 
        ng-model="locationDetail.stationType.name" 
        k-options="customOptionsStationType"/> 
      </div> 
      </div> 

      <!-- USER EDIT FORM PART 1 --> 
      <div class="col-md-3 column"> 
      <div class="form-group"> 
       <label for="abloyLocation">{{ 'ABBLOY_LOCATION' | translate }}</label> 
       <input type="text" ng-model="locationDetail.abloyLocation" class="form-control" id="abloyLocation"/> 
      </div> 
      <div class="form-group"> 
       <label for="bsc">{{ 'BSC' | translate }} </label> 
       <input type="text" ng-model="locationDetail.bsc" class="form-control" id="bsc"/> 
      </div> 
      <div class="form-group"> 
       <label for="indoorOutdoor">{{ 'INDOOR_OUTDOOR' | translate }} {{ '*' | translate }}</label> 
       <select id="indoorOutdoor" ng-model="locationDetail.indoorOutdoor" class="form-control" required> 
       <option value="Indoor">{{ 'INDOOR' | translate }}</option> 
       <option value="Outdoor">{{ 'OUTDOOR' | translate }}</option> 
       <option value="IndoorOutdoor">{{ 'INDOOR_OUTDOOR_TYPE' | translate }}</option> 
       </select> 
      </div> 
      <div class="form-group"> 
       <label for="partner">{{ 'PARTNER' | translate }} {{ '*' | translate }}</label> 
       <input kendo-auto-complete 
        id="partner" 
        class="form-control" 
        ng-model="locationDetail.partner.name" 
        k-options="customOptionsPartner" 
       /> 
      </div> 
      </div> 


      <!-- USER EDIT FORM PART 3 --> 
      <div class="col-md-3 column"> 
      <div class="form-group"> 
       <label for="accessNote">{{ 'NOTE' | translate }}</label> 
         <textarea id="accessNote" ng-model="locationDetail.accessNote" rows="14" cols="34"> 

         </textarea> 
      </div> 

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

    </div> 
</div> 
+0

閱讀此內容:http:// getboot strap.com/examples/non-responsive/ – paul 2015-02-05 15:22:21

+0

我之前就衝這篇文章,但沒有關於表單輸入的內容。 – redrom 2015-02-05 15:24:44

+0

我認爲你的意思是「責任感」。 「責任」是完全不同的。 – 2015-02-05 15:25:55

回答

3

它不是你應該看看,它的網格中的字段,您已經列設置爲COL-MD或col-sm,將它們更改爲col-xs,如果要禁用整個網站的響應性,請閱讀以下內容:http://getbootstrap.com/examples/non-responsive 像保羅提到的那樣