缩短表单字段宽度引导程序答案

【问题标题】：Shorten form field width bootstrap缩短表单字段宽度引导程序
【发布时间】：2016-03-22 03:15:04
【问题描述】：

在 Bootstrap 中，文本输入自然是 100% 的页面宽度。

<div class="container-fluid">
    <div class="row-fluid">
         <div class="col-md-12">
              <div class="form-group">
                     {{ Form::label('name', 'Name *') }}
                     {{ Form::text('name', Input::old('name'), array('class' => 'form-control’)) }}
              </div>
              <div class="form-group">
                     {{ Form::label('desc', 'Description') }}
                     {{ Form::text('desc', Input::old('desc'), array('class' => 'form-control’)) }}
              </div>
         </div><!-- div.col-md-12 end -->
     </div><!-- div.row-fluid body end -->
</div><!-- div.container-fluid end -->

让表单字段更短的正确引导方法是什么？

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

将它们包装在列类中

<div class="form-group">
  <div class="row">
    <label class="col-sm-3">Field</label>
    <div class="col-sm-7">
        <input type="text" />
    </div>
    <div class="col-sm-2">
        &nbsp;
    </div>
  </div>
</div>

【讨论】：

这行得通。我用过。我想知道是否有一种更简洁/更简洁的方式来满足这一常见要求。
也许吧。为了让自己感觉更好，我所做的就是将我的错误消息推送到空的 div 中。一旦他们有了目标，感觉就像是一个更好的解决方案:)。

【解决方案2】：

您不需要声明<div class="col-md-12">。如果您想将两个表单组彼此相邻，请尝试这样的操作。

<div class="container-fluid">
<div class="row-fluid">
          <div class="form-group col-md-6">
                 {{ Form::label('name', 'Name *') }}
                 {{ Form::text('name', Input::old('name'), array('class' => 'form-control’)) }}
          </div>

          <div class="form-group col-md-6">
                 {{ Form::label('desc', 'Description') }}
                 {{ Form::text('desc', Input::old('desc'), array('class' => 'form-control’)) }}
          </div>
 </div><!-- div.row body end -->

如果您想将三个表单组并排放置，您可以将col-md-4 放在每个form-group 旁边，依此类推。让我知道这是否有帮助。

【讨论】：

我知道你可以在一行中有多个列并在每个列中放置表单域，但这不是我想要的。