Bootstrap 3.0:如何在同一行上输入文本和输入？

Question

我目前正在将我的网站切换到Bootstrap 3.0.我遇到表单输入和文本格式问题.在Bootstrap 2中有效的功能在Bootstrap 3中不起作用.

如何在表单输入之前和之后获取同一行上的文本？我已经将它缩小到示例的Bootstrap 3版本中的'form-control'类的问题.

我如何在一行中获取所有文本和输入？我想bootstrap 3示例看起来像jsfiddle中的bootstrap 2示例.

JS小提琴的例子

<div class="container ">
  <form>
      <h3> Format used to look like this in Bootstrap 2 </h3>
      <div class="row ">
          <label for="return1"><b>Return:</b></label>
          <input id="return1" name='return1' class=" input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return1' style='color:blue'> +/- 14 Days</span>
      </div>

       <br>   
       <br>   
           <h3> BootStrap 3 Version </h3>

      <div class="row">
          <label for="return2"><b>Return:</b></label>
          <input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
                 type="text" value='8/28/2013'>
          <span id='return2' style='color:blue'> +/- 14 Days</span>
      </div>
  </form>

更新:我将代码更改为有效但现在无法对齐的代码.有任何想法吗？

<div class="form-group">
<div class="row">
    <div class="col-xs-3">
        <label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
    </div>
    <div class="col-xs-2">
        <select name="class_type" id="class_type" class="  form-control input-lg" style="width:200px" autocomplete="off">
            <option >Economy</option>
            <option >Premium Economy</option>
            <option >Club World</option>
            <option >First Class</option>
        </select>
    </div>
 </div>

Answer 1

直接来自文档http://getbootstrap.com/css/#forms-horizo​​ntal.

使用Bootstrap的预定义网格类通过添加.form-horizontal到表单(不必是a <form>)来在水平布局中对齐标签和表单控件组.这样做的更改.form-groups就像网格行一样,所以不需要.row.

样品:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Answer 2

我会将你想要内联的每个元素放在你的行中一个单独的col-md-*div中.或者强制您的元素以内联方式显示.表单控件类显示块,因为这是bootstrap认为应该完成的方式.

Answer 3

你需要的是.form-inline课程.但是,您需要小心,使用新.form.inline类,您必须为每个控件指定宽度.

看看这个

Answer 4

这些都不适合我,不得不使用.form-control-static课堂.

http://getbootstrap.com/css/#forms-controls-static

Answer 5

你可以这样做:

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="input" placeholder="Input text">
        </div>
    </div>
</form>

小提琴