引導標籤和輸入總是在一行

Question

當我減少瀏覽器寬度：所述<select>輸入轉移到新的一行。

我想：如果瀏覽器的寬度沒有足夠的空間，以保持標籤和一個線路輸入，引導應該轉移兩個標籤和其輸入到新行（即讓他們在一起）。

這裏舉例：http://codepen.io/anon/pen/OMZJPw

Answer 1

請更新您的HTML結構是這樣的

<div class="row"> 
     <div class="form-inline col-sm-6" style="overflow-x: hidden"> 
     <div class="row"> 
      <div class="col-sm-6"> 
      <label class="control-label">{{ 'commonLabelName' | translate }}:</label> 
      </div> 
      <div class="col-sm-6"> 
      <div class="btn-group" ng-class="{ 'has-error': newEventForm.name.$invalid && newEventForm.name.$dirty }"> 
       <input required ng-maxlength="100" name="name" class="form-control" ng-model="vm.newEvent.name" /> 
      </div> 
      </div> 
     </div> 
     </div> 

     <div class="form-inline col-sm-6"> 
     <div class="row"> 
      <div class="col-sm-6"> 
      <label class="control-label">{{ 'commonLabelAction' | translate }}:</label> 
      </div> 
      <div class="col-sm-6"> 
      <div class="btn-group" style="width: 70%" ng-class="{ 'has-error': newEventForm.action.$invalid && newEventForm.action.$dirty }"> 
       <select name="action" required class="form-control" style="width: 100%" ng-model="vm.newEvent.actionId" ng-options="action.id as action.name for action in vm.actionList"></select> 

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

演示：http://codepen.io/anon/pen/bEMGay

Answer 2

你不應該使用內聯CSS可以很容易地編輯。 在你的內聯CSS，我找到selectwidth:70%爲label和100%。 爲什麼不嘗試設置成max-width？使其自動調整大小。

Answer 3

使用自舉類這樣

<div class="form-inline col-sm-6" > 
     <label class="control-label col-md-3 col-xs-3 col-sm-3">{{ 'commonLabelAction' | translate }}:</label> 
     <div class="btn-group" class="col-md-9 col-xs-9 col-sm-9" ng-class="{ 'has-error': newEventForm.action.$invalid && newEventForm.action.$dirty }"> 
      <select name="action" required class="form-control" style="width: 100%" ng-model="vm.newEvent.actionId" ng-options="action.id as action.name for action in vm.actionList"></select> 

     </div> 
    </div>