css - 在 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