Bootstrap 3.0:如何让文本和输入在同一行?

I'm currently switching my website over to Bootstrap 3.0. I'm having an issue with form input and text formatting. What worked in Bootstrap 2 does not work in Bootstrap 3.

我现在正在切换我的网站到Bootstrap 3.0。我对表单输入和文本格式有意见。在引导2中起作用的在引导3中不起作用。

How can I get text on the same line before and after a form input? I have narrowed it down to a problem with the 'form-control" class in the Bootstrap 3 version of the example.

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

How would I go about getting all the text and input on one line? I would like the bootstrap 3 example to look like the bootstrap 2 example in the jsfiddle.

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

JS fiddle example

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>

Update: I change the code to this which works but having trouble with alignment now. Any ideas?

更新:我将代码更改为这个，它可以工作，但是现在在对齐方面有问题。什么好主意吗?

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

9 个解决方案

#1

I would put each element that you want inline inside a separate col-md-* div within your row. Or force your elements to display inline. The form-control class displays block because that's the way bootstrap thinks it should be done.

我将把您希望内联的每个元素放在您的行中一个单独的coll -md-* div中。或者强制元素以内联方式显示。form-control类显示块，因为bootstrap认为应该这样做。

#2

127

Straight from documentation http://getbootstrap.com/css/#forms-horizontal.

直接从http://getbootstrap.com/css/ forms-horizontal文档。

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.

使用Bootstrap的预定义网格类，通过向窗体添加.form-horizontal(不必是

Sample:

示例:

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

#3

What you need is the .form-inline class. You need to be careful though, with the new .form.inline class you have to specify the width for each control.

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

Take a look at this

看看这个

#4

None of these worked for me, had to use .form-control-static class.

这些对我都不起作用，必须使用。form-control-static类。

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

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

#5

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

小提琴

#6

The way I solved it was simply to add an override for all my textboxes on the main css of my site, as so:

我解决这个问题的方法就是在我的网站的主css上添加一个覆盖所有我的文本框，如下:

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

#7

just give mother of div "class="col-lg-12""

只需要给div的母亲class=" coll -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>

it will be

这将是

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

#8

all please check the updated code as we have to use

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

 form-control-static not only form-control

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

thanks with regards

谢谢与问候

#9

-3

Or you can do this:

或者你可以这样做:

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

I tried every one of the suggestions above and none of them worked. I don't want to pick a fixed number of columns in the 12 column grid. I want the prompt, and the input right after it, and I want the columns to stretch as needed.

我尝试了上面的每一个建议，但没有一个奏效。我不想在12列网格中选取固定数量的列。我想要提示符和后面的输入，我想要列按需要展开。

Yes, I know, that is against what bootstrap is all about. And you should NEVER use a table. Because DIV is so much better than tables. But the problem is that tables, rows, and cells actually WORK.

是的，我知道，这是与bootstrap的目的背道而驰的。而且你不应该用桌子。因为DIV比表格好多了。但是问题是表、行和单元格实际上是可以工作的。

YES - I REALLY DO know that there are CSS zealots, and the knee-jerk reaction is never never never use TABLE, TR, and TD. Yes, I do know that DIV class="table" with DIV class="row" and DIV class="cell" is much much better. Except when it doesn't work, and there are many cases. I don't believe that people should blindly ignore those situations. There are times that the TABLE/TR/TD will work just fine, and there is not reason to use a more complicated and more fragile approach just because it is considered more elegant. A developer should understand what the benefits of the various approaches are, and the tradeoffs, and there is no absolute rule that DIVs are better.

是的——我确实知道有CSS*者，而且这种下意识的反应永远不会使用表格、TR和TD。是的，我知道DIV class="table"和DIV class="row"和DIV class="cell"要好得多。除非它不起作用，而且有很多情况。我不认为人们应该盲目地忽视这些情况。有时表/TR/TD会正常工作，没有理由仅仅因为它被认为更优雅就使用更复杂、更脆弱的方法。开发人员应该了解各种方法的好处和权衡，而且没有绝对的规则表明div更好。

"Case in point - based on this discussion I converted a few existing tds and trs to divs. 45 minutes messing about with it trying to get everything to line up next to each other and I gave up. TDs back in 10 seconds later - works - straight away - on all browsers, nothing more to do. Please try to make me understand - what possible justification do you have for wanting me to do it any other way!" See [https://*.com/a/4278073/1758051]

在这个讨论的基础上，我将一些现有的tds和trs转换为divs。45分钟的时间里，我想让所有的东西都对齐到一起，然后我就放弃了。TDs在10秒后返回-立即生效-在所有浏览器上，没有更多的事情要做。请试着让我明白——你有什么可能的理由让我用其他方式做这件事?”看到[https://*.com/a/4278073/1758051]

And this: "

这:“

Layout should be easy. The fact that there are articles written on how to achieve a dynamic three column layout with header and footer in CSS shows that it is a poor layout system. Of course you can get it to work, but there are literally hundreds of articles online about how to do it. There are pretty much no such articles for a similar layout with tables because it's patently obvious. No matter what you say against tables and in favor of CSS, this one fact undoes it all: a basic three column layout in CSS is often called "The Holy Grail"." [https://*.com/a/4964107/1758051]

布局应该很容易。关于如何在CSS中使用页眉和页脚实现动态三列布局的文章已经写满了，这说明它是一个糟糕的布局系统。当然，你可以让它发挥作用，但是网上有成百上千的关于如何做到这一点的文章。对于表的类似布局，几乎没有这样的文章，因为它显然是显而易见的。不管你说什么反对表格和支持CSS，这一事实将会破坏一切:CSS中一个基本的三列布局通常被称为“圣杯”。[https://*.com/a/4964107/1758051]

I have yet to see a way to force DIVs to always line up in a column in all situations. I keep getting shown trivial examples that don't really run into the problems. "Responsive" is about providing a way that they will not always line up in a column. However, if you really want a column, you can waste hours trying to get DIV to work. Sometimes, you need to use appropriate technology no matter what the zealots say.

我还没有找到一种方法来迫使DIVs在所有情况下总是排成一列。我不断地展示一些没有遇到问题的小例子。“响应”是指提供一种方式，使它们不会总是在列中排列。然而，如果您真的想要一个列，您可以浪费时间试图让DIV工作。有时，无论*者说什么，你都需要使用适当的技术。

#1