Bootstrap 3.0：如何在同一行上输入文字和文字？

我目前正在将网站切换到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>

我会将要内联的每个元素放在行内的单独的col-md- * div中。或强制您的元素以内联方式显示。表单控件类显示块，因为引导程序认为应该这样做。

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

使用Bootstrap的预定义网格类，通过添加.form-horizontal到表单（不必是<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>

您需要的是.form-inline课程。但是，您需要注意，对于新.form.inline类，您必须为每个控件指定宽度。

看看这个

这些都不适合我，必须使用.form-control-static类。

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

您可以这样做：

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

小提琴

只是给div的母亲“ class =“ col-lg-12””

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

这将是

<div class="form-group">
<div class="col-lg-12">
  <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>
</div>

我解决该问题的方法只是在网站的主要CSS上为所有文本框添加替代，如下所示：

.form-control {
    display:initial !important;
}

全部请检查更新后的代码，因为我们必须使用

 form-control-static not only form-control

http://jsfiddle.net/tusharD/58LCQ/34/

谢谢你的问候

在Bootstrap 4 for Horizo​​ntal元素中，可以.row与.col-*-*类一起使用以指定标签和控件的宽度。看到这个链接。

如果要在单个水平行上显示一系列标签，表单控件和按钮，则可以使用.form-inline此链接获取更多信息。

或者您可以这样做：

<table>
  <tr>
    <td><b>Return:</b></td>
    <td><input id="return1" name='return1' 
              class=" input input-sm" style="width:150px"
              type="text" value='8/28/2013'></td>
  </tr>
</table>

我尝试了以上所有建议，但没有一个起作用。我不想在12列网格中选择固定数量的列。我想要提示和紧随其后的输入，并且希望列根据需要进行拉伸。

是的，我知道，这与引导程序有关。而且您永远不要使用桌子。因为DIV比表格好得多。但是问题在于表，行和单元格实际上在工作。

是的-我确实确实知道有CSS狂热者，而且膝跳反应永远都不会使用TABLE，TR和TD。是的，我确实知道DIV class =“ table”与DIV class =“ row”和DIV class =“ cell”更好得多。除非它不起作用，并且有很多情况。我不认为人们应该盲目地忽略那些情况。有时候TABLE / TR / TD可以很好地工作，并且没有理由仅仅因为它被认为更优雅而使用更复杂，更脆弱的方法。开发人员应该了解各种方法的好处以及权衡，并且没有绝对的规则可以证明DIV更好。

“举例来说，基于这种讨论，我将一些现有的tds和trs转换为div。花了45分钟弄乱了它，试图使所有内容彼此并排，我放弃了。TD在10秒后返回-工作-立即-在所有浏览器上，无需执行任何其他操作。请尝试使我理解-您希望我以其他方式进行操作有什么可能的理由！” 参见[ https://stackoverflow.com/a/4278073/1758051]

还有这个： ”

布局应该很容易。事实上，有文章介绍了如何在CSS中使用页眉和页脚实现动态三列布局，这表明它是一个较差的布局系统。当然，您可以使用它，但是实际上有数百篇有关如何执行此操作的文章。对于表格的类似布局，几乎没有此类文章，因为它显然是显而易见的。无论您对表说什么，而对CSS表示赞成，这一事实都无法解决所有问题：CSS中基本的三列布局通常称为“圣杯”。” [ https://stackoverflow.com/a/4964107/ 1758051]

我还没有找到一种在所有情况下都强制DIV始终排成一列的方法。我不断得到一些琐碎的例子，这些例子并没有真正遇到问题。“响应式”是指提供一种方法，使它们不会总是在列中对齐。但是，如果您确实想要一列，则可能会浪费大量时间来尝试使DIV正常工作。有时，无论狂热者怎么说，都需要使用适当的技术。