Question

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

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

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

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

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

Answer 2

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

Answer 3

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

看看at this

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>

Fiddle

Answer 6

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

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

Answer 7

只给div的母亲＆＃34; class =＆＃34; col-lg-12＆＃34;＆＃34;

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

Answer 8

请查看我们必须使用的更新代码

 form-control-static not only form-control

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

感谢关心

Answer 9

在用于水平元素的Bootstrap 4中，可以将.row与.col-*-*类一起使用以指定标签和控件的宽度。参见此link。

如果您想在单个水平行上显示一系列标签，表单控件和按钮，则可以使用.form-inline来获取有关link的更多信息

Answer 10

或者你可以这样做：

<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列网格中选择固定数量的列。我想要提示，然后输入，我想要根据需要拉伸列。

是的，我知道，这是针对什么是bootstrap。你永远不应该使用一张桌子。因为DIV比桌子好得多。但问题是表，行和单元实际上是工作。

是的 - 我真的知道有CSS狂热者，并且从不会使用TABLE，TR和TD的膝跳反应。是的，我知道DIV类=＆＃34;表＆＃34;与DIV类=＆＃34;行＆＃34;和DIV类=＆＃34; cell＆＃34;要好得多。除非它不起作用，并且有很多情况。我不相信人们应该盲目地忽视这些情况。有时候TABLE / TR / TD工作得很好，并且没有理由使用更复杂和更脆弱的方法，因为它被认为更优雅。开发人员应该了解各种方法的好处和权衡，并且没有DIV更好的绝对规则。

＆＃34;基于这个讨论的例子 - 我将一些现有的tds和trs转换为div。 45分钟搞乱它试图让一切都排在一起，我放弃了。 TD在10秒后回来 - 直接在所有浏览器上工作，没有更多事情要做。请尽量让我理解 - 你有什么理由可以让我以任何其他方式去做！＆＃34;见[https://stackoverflow.com/a/4278073/1758051]

而且：＆＃34;

布局应该很简单。有关如何在CSS中实现带有页眉和页脚的动态三列布局的文章的事实表明它是一个糟糕的布局系统。当然你可以让它工作，但在网上有数百篇关于如何做的文章。对于与表格类似的布局，几乎没有这样的文章，因为它显而易见。无论你对桌子说什么和支持CSS，这个事实都解开了：CSS中基本的三列布局通常被称为＃34; The Holy Grail＆＃34;。＆＃34; [https://stackoverflow.com/a/4964107/1758051]

我还没有看到一种强制DIV在所有情况下始终排列在列中的方法。我不断向我展示那些不能解决问题的琐碎例子。＆＃34;响应＆＃34;是关于提供一种他们不会总是在列中排列的方式。但是，如果你真的想要一个专栏，那么你可以浪费几个小时来让DIV工作。有时，无论狂热者说什么，你都需要使用适当的技术。

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

10 个答案: