Bootstrap：如何避免表单输入的响应？

Question

我有这样的形式：

如果我将显示尺寸缩小到宽度的一半以上，我就得到了这个。

如何在默认情况下禁用此行为？

感谢您的任何建议。

修改

带有表单的模板代码：

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

Answer 1

它不是您应该查看的字段，它的网格，您将列设置为col-md或col-sm，将它们更改为col-xs，如果要在整个网站上禁用响应，请阅读： http://getbootstrap.com/examples/non-responsive 像保罗提到的