Выбрать список с шириной формы в Bootstrap

Question

Я делаю приложение с Rails и AngularJS, которые имеют форму с выбранным списком, проблема в том, что это выглядит довольно уродливо, потому что ширина слишком велика для параметров он есть.

Вот моя форма с некоторыми примерами значений

Как я могу сократить ширину списка выбора, не искажая остальные формы?

Вот код моей формы

<h1>Create Form</h1> 

<form ng-submit="addPoll()" style="margin-top:30px;"> 

    <div class="form-group"> 
    <label>Title</label> 
    <input type="text" class="form-control" ng-model="title"></input> 
    </div> 

    <div class="form-group"> 
    <label>Description</label> 
    <textarea type="text" class="form-control" ng-model="description"></textarea> 
    </div> 

    <div class="form-group"> 
    <label>Group</label> 
    <select class="form-control" ng-model="data.groupSelect"> 
     <option ng-repeat="group in data.groups" value="{{group.id}}" >{{group.name}}</option> 
    </select> 
    </div> 

    <div class="form-group"> 
    <label>Welcome Message</label> 
    <textarea type="text" class="form-control" ng-model="initial_message"></textarea> 
    </div> 

    <div class="form-group"> 
    <label>Outgoing Message</label> 
    <textarea type="text" class="form-control" ng-model="final_message"></textarea> 
    </div> 

    <div class="checkbox"> 
    <label> 
     <input type="checkbox" ng-model="allow_anonymous_answer"> Allow Anonymous Answer 
    </label> 
    </div> 

    <button type="submit" class="btn btn-primary" style="float: right;">Continue</button> 

</form> 

Answer 1

Вы можете сделать это несколько различных способов. Вы можете добавить встроенный стиль в div.form-group или использовать систему сетки Bootstrap. Вот два примера:

<div class="form-group" , style="width: 200px"> 
    <label>Group</label> 
    <select class="form-control" ng-model="data.groupSelect"> 
    <option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option> 
    </select> 
</div> 

<div class="row"> 
    <div class="col-sm-3"> 
    <div class="form-group"> 
     <label>Group</label> 
     <select class="form-control" ng-model="data.groupSelect"> 
     <option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option> 
     </select> 
    </div> 
    </div> 
</div> 

JSFiddle