98

我目前正在将我的网站切换到 Bootstrap 3.0。我在表单输入和文本格式方面遇到问题。在 Bootstrap 2 中有效的在 Bootstrap 3 中无效。

如何在表单输入之前和之后在同一行上获取文本？我已将其范围缩小到示例的 Bootstrap 3 版本中的“表单控制”类的问题。

我将如何在一行上获取所有文本和输入？我希望 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>

4

10 回答 10

144

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

.form-horizontal使用 Bootstrap 的预定义网格类，通过添加到表单（不一定是） ，在水平布局中对齐标签和表单控件组<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>
于 2013-10-28T13:07:08.587 回答
41

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

于 2013-08-29T02:44:08.107 回答
26

你需要的是.form-inline课堂。不过，您需要小心，对于新.form.inline类，您必须为每个控件指定宽度。

看看这个

于 2013-09-09T18:09:48.970 回答
13

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

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

于 2015-06-15T06:12:18.637 回答
10

You can do it like this:

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

Fiddle

于 2014-03-06T15:03:47.827 回答
4

只给 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>
于 2017-05-09T06:05:49.370 回答
3

我解决它的方法只是在我网站的主 css 上为我的所有文本框添加一个覆盖，如下所示：

.form-control {
    display:initial !important;
}
于 2016-05-23T10:46:21.500 回答
2

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

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

于 2019-11-03T07:44:06.167 回答
1

所有请检查更新的代码，因为我们必须使用

 form-control-static not only form-control

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

谢谢问候

于 2015-08-27T07:16:42.610 回答
-2

或者你可以这样做：

<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="row" 和 DIV class="cell" 的 DIV class="table" 要好得多。除非它不起作用，而且有很多情况。我不认为人们应该盲目地忽视这些情况。有时 TABLE/TR/TD 可以正常工作，没有理由仅仅因为它被认为更优雅而使用更复杂和更脆弱的方法。开发人员应该了解各种方法的好处和权衡，并且没有绝对规则说 DIV 更好。

“举个例子——基于这个讨论，我将一些现有的 tds 和 trs 转换为 divs。45 分钟搞砸它试图让所有东西都排列在一起，我放弃了。10 秒后 TDs 回来了——有效- 马上 - 在所有浏览器上，无事可做。请试着让我理解 - 你有什么可能的理由让我以任何其他方式这样做！” 见[ https://stackoverflow.com/a/4278073/1758051]

和这个： ”

布局应该很容易。有文章介绍如何在 CSS 中实现带页眉和页脚的动态三列布局，这表明它是一个糟糕的布局系统。当然你可以让它工作，但是网上有数百篇关于如何做到这一点的文章。几乎没有类似的表格布局的文章，因为它是显而易见的。无论你说什么反对表格和支持 CSS，这一事实都消除了这一切：CSS 中的基本三列布局通常被称为“圣杯”。” [ https://stackoverflow.com/a/4964107/ 1758051]

我还没有看到一种方法可以强制 DIV 在所有情况下始终排成一列。我不断地看到一些琐碎的例子，这些例子并没有真正遇到问题。“响应式”是关于提供一种他们不会总是排成一列的方式。但是，如果您真的想要一个列，您可能会浪费数小时试图让 DIV 工作。有时，无论狂热者怎么说，您都需要使用适当的技术。

于 2016-11-26T04:44:20.030 回答