Question

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

将表单字段缩短的正确Bootstrap方法是什么？

Answer 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>

Answer 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旁边，依此类推。如果这有帮助，请告诉我。

缩短表单字段宽度bootstrap

2 个答案: