在Bootstrap中选择具有表单宽度的List

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