Bootstrap: How to avoid responsivity of the form inputs? - html

Question

I have form like this:
And if i shrink display size to more than half of width i got this.
How can i disable this behavior in default please?
Thanks for any advice.
EDIT:
Code of the template with form:
<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">← </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

Its not the fields you should look at, its the grid, you have columns set to col-md or col-sm, change them to col-xs, if you want to disable responsiveness on the entire website then read this: http://getbootstrap.com/examples/non-responsive
like paul mentioned