引导3.0：如何在同一行上有文本和input？
我目前正在将我的网站切换到Bootstrap 3.0。 我遇到了表单input和文本格式问题。 Bootstrap 2中的工作在Bootstrap 3中不起作用。
如何在表单input之前和之后在同一行上获取文本？ 我已经缩小了范例在Bootstrap 3版本中的“表单控制”类的问题。
我将如何去获得所有的文字和input在一行？ 我想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> 更新：我将代码更改为这个工作，但现在有alignment的麻烦。 有任何想法吗？
<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。 或者强制你的元素内联显示。 窗体控件类显示块，因为这是bootstrap认为应该完成的方式。
直接从文档http://getbootstrap.com/css/#forms-horizontal 。
使用Bootstrap的预定义网格类，通过在表单中添加.form-horizontal （不必是<form> ），将标签和表单控件组以水平布局alignment。 这样做会改变.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类。
你可以这样做：
<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>
小提琴
我解决这个问题的方法就是简单地在我的网站的主CSS上添加一个覆盖所有文本框的内容，如下所示：
.form-control { display:initial !important; }
只要给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-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>
所有请检查更新的代码，因为我们必须使用
form-control-static not only form-control
http://jsfiddle.net/tusharD/58LCQ/34/
感谢与问候
或者你可以这样做：
<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>
我尝试了上面的每一个build议，没有一个工作。 我不想在12列网格中select固定数量的列。 我想要的提示，并在它后面的input，我想列根据需要拉伸。
是的，我知道，这是反对什么bootstrap是关于。 而且你永远不要使用一张桌子。 因为DIV比表格好多了。 但问题是表，行和单元格实际上工作。
是的 – 我真的知道，有CSS狂热分子，下跪反应永远不会使用TABLE，TR和TD。 是的，我知道DIV class =“table”和DIV class =“row”，DIV class =“cell”要好得多。 除了不能工作，还有很多情况。 我不相信人们应该盲目地忽略这些情况。 有些时候TABLE / TR / TD可以正常工作，而且没有理由使用更复杂和更脆弱的方法，因为它被认为是更优雅的。 开发人员应该了解各种方法的好处以及权衡，并且没有绝对的规则DIV更好。
“举个例子 – 基于这个讨论，我把几个现有的tds和trs转换成了divs，45分钟搞砸了，试图把所有的东西放在一起，然后我放弃了。 – 立即 – 在所有的浏览器上，无需做任何事情，请尽量让我明白 – 你有什么理由要我以其他方式去做！“ 请参见[ https://stackoverflow.com/a/4278073/1758051%5D
和这个： ”
布局应该很容易。 有关如何在CSS中实现带有页眉和页脚的dynamic三列布局的文章显示这是一个糟糕的布局系统。 当然，你可以把它运行起来，但是网上有几百篇关于如何去做的文章。 几乎没有这样的文章与表格类似的布局，因为它是明显的。 无论你对桌面和CSS有什么看法，这个事实都可以解决：CSS中基本的三列布局通常被称为“圣杯”。[ https://stackoverflow.com/a/4964107/ 1758051]
我还没有看到一种方法来迫使DIV在所有情况下总是排成一列。 我不断地看到一些微不足道的例子。 “响应”是关于提供一种方式，他们不会总是排成一列。 然而，如果你真的想要一个专栏，你可以浪费几个小时试图让DIV工作。 有时候，不pipe狂热分子怎么说，都需要使用适当的技术。
