twitter-bootstrap Bootstrap 中的一行中的多个文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27161025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple textboxes in a single row in Bootstrap
提问by Paul McLean
I'm using Bootstrap to try and place 2 textboxes next to a label, all on a single row, however, I can't seem to get everything to line up properly.
我正在使用 Bootstrap 尝试在标签旁边放置 2 个文本框，所有文本框都在一行中，但是，我似乎无法让所有内容都正确排列。
I'm working on trying to get the "Domestic" row working first. The other rows look exactly how I want them to look, but that's only because I cheated and added a style of "width: 49%" to them. Doing this, however, breaks the fully responsive nature of the textboxes, which I want to keep.
我正在努力让“国内”行首先工作。其他行看起来正是我希望它们看起来的样子，但这只是因为我作弊并为它们添加了“宽度：49％”的样式。但是，这样做会破坏我想保留的文本框的完全响应性质。
You'll notice that for the "Domestic" row, that the label doesn't line up with the rows below it, and neither do either of the textboxes. This is my code for the "Domestic" row -
您会注意到，对于“国内”行，标签不与其下方的行对齐，两个文本框也不对齐。这是我的“国内”行代码 -
<div class="row">
<div class="form-horizontal">
<div class="form-group col-md-12 col-xs-12">
<div class="col-md-4 col-xs-12">
<label class="control-label">Domestic</label>
</div>
<div class="col-md-4 col-xs-12">
<input id="percentage" class="form-control" type="text" placeholder="Percentage">
<span class="input-group-addon">
<i class="glyphicon glyphicon-remove-circle"></i>
</span>
</div>
<div class="col-md-4 col-xs-12">
<input id="flat" class="form-control" type="text" placeholder="Flat (eg. 0.33)">
<span class="input-group-addon">
<i class="glyphicon glyphicon-remove-circle"></i>
</span>
</div>
</div>
</div>
Things go even more pear shaped when I run validation on the form and start displaying those input-group-addons -
当我在表单上运行验证并开始显示那些输入组插件时，事情变得更加梨形 -
All I'm essentially trying to do is split the row into thirds, 1 third for the label, 1 third for the first textbox and 1 third for the second textbox (and then, if that works, hopefully I can get it working for 1 row per control on xs displays).
我基本上要做的就是将行分成三部分，标签的三分之一，第一个文本框的三分之一和第二个文本框的三分之一（然后，如果可行，希望我可以让它工作 1 xs 显示器上每个控件的行）。
Any ideas?
有任何想法吗？
Edit: As requested, here is my code for the "Amex" row -
编辑：根据要求，这是我的“美国运通”行代码 -
<div class="row">
<div class="form-group col-md-12 col-xs-12">
<label class="col-md-4 col-xs-12 control-label">Amex</label>
<div class="input-group col-md-8 col-xs-12 form-inline">
<div class="input-group" style="width: 49%;">
<input id="amexPercentage" class="form-control" type="text" placeholder="Percentage">
<span class="input-group-addon">
<i class="glyphicon glyphicon-remove-circle"></i>
</span>
</div>
<div class="input-group" style="width: 49%;">
<input id="amexFlat" class="form-control" type="text" placeholder="Flat (eg. 0.33)">
<span class="input-group-addon">
<i class="glyphicon glyphicon-remove-circle"></i>
</span>
</div>
</div>
</div>
回答by Christina
The form you're creating is tricky. There's no examples in the documentation of a .form-horizontal with nested columns inside the widest column. You were missing the correct html for the input-group too. Since there is a lot of wrappers, it's good to indent your code and comment it.
您正在创建的表单很棘手。在 .form-horizontal 的文档中没有在最宽列中嵌套列的示例。您也缺少输入组的正确 html。由于有很多包装器，因此最好缩进您的代码并对其进行注释。
What you need to do is use grid system inside the widest column and since you want two 50% columns, you would use just a .col-X-6at the breakpoint you desire. In this case you want the columns side by side at the col-md min-width, which is 992px.
您需要做的是在最宽的列内使用网格系统，并且由于您需要两个 50% 的列，因此您只需.col-X-6在所需的断点处使用 a 。在这种情况下，您希望列在 col-md min-width 处并排，即 992px。
Also, often times the col-X-12 class is not necessary. An element will be 100% width below the last column class used. An element with .col-md-4 will be 100% under that, you don't have to tell it to be 100% by adding an extra and unecessary class col-sm-12 or col-xs-12
此外，通常不需要 col-X-12 类。一个元素的宽度将比最后一个使用的列类低 100%。带有 .col-md-4 的元素将是 100%，您不必通过添加额外的和不必要的类 col-sm-12 或 col-xs-12 来告诉它是 100%
Demo: https://jsbin.com/yojoci
演示：https: //jsbin.com/yojoci
CSSThis adds some vertical space when the form stacks at below the min-width class choice.
CSS当表单在最小宽度类选项下方堆叠时，这会增加一些垂直空间。
@media (max-width:991px) {
.form-horizontal.custom-form .form-group .row [class*=col-]:first-child {
margin-bottom: 5px
}
}
HTML
HTML
<div class="container">
<form class="form-horizontal custom-form" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Domestic</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text One">
<span class="input-group-addon">@</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text Two">
<span class="input-group-addon">@</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!--/.row -->
</div>
<!--/.col-sm-10 -->
</div>
<!--/.form-group -->
<div class="form-group">
<label class="col-sm-2 control-label">Amex</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text Three">
<span class="input-group-addon">@</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text Four">
<span class="input-group-addon">@</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!--/.row -->
</div>
<!--/.col-sm-10 -->
</div>
<!--/.form-group -->
<div class="form-group">
<label class="col-sm-2 control-label">Premium</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text Five">
<span class="input-group-addon">@</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Text Six">
<span class="input-group-addon">@</span>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-md-6 -->
</div>
<!--/.row -->
</div>
<!--/.col-sm-10 -->
</div>
<!--/.form-group -->
</form>
</div>
<!--/.container (DON'T NEST) -->
回答by Shaan Singh
Instead of trying to hack the three column layout together, I would use a framework already built to handle it. I recommend Toast by Dan Eden: https://github.com/daneden/Toast.
我不会尝试将三列布局组合在一起，而是使用已经构建的框架来处理它。我推荐 Dan Eden 的 Toast：https: //github.com/daneden/Toast。
It will help you create a three column layout that's responsive and doesn't break.
它将帮助您创建一个具有响应性且不会中断的三列布局。
As he said in the docs, link this in your head:
正如他在文档中所说，在你的脑海中链接：
<link rel="stylesheet" href="css/toast/grid.css">
Then create your layout with the following format:
然后使用以下格式创建布局：
<div class="container">
<div class="grid">
<div class="grid__col grid__col--1-of-4">
</div>
<div class="grid__col grid__col--3-of-4">
</div>
<div class="grid__col grid__col--6-of-12">
</div>
</div>
</div>
There are more specific instructions in his description.
他的描述中有更具体的说明。
回答by edita
Make sure you close your input tags correctly. Currently you are missing the closing tag />. Please also post your html for the next two rows as well.
确保正确关闭输入标签。目前您缺少结束标记/>。还请为接下来的两行发布您的 html。
<input id="flat" class="form-control" type="text" placeholder="Flat (eg. 0.33)" />
