在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