twitter-bootstrap 输入组 - 两个彼此靠近的输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18954117/
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
Input group - two inputs close to each other
提问by UnknownError1337
How can I make input group involves two inputs?
如何使输入组涉及两个输入？
<div class="input-group">
<input type="text" class="form-control" placeholder="MinVal">
<input type="text" class="form-control" placeholder="MaxVal">
</div>
This doesn't work, they are horizontal instead of inline
这不起作用，它们是水平的而不是内联的
采纳答案by Alexander Rechsteiner
Assuming you want them next to each other:
假设您希望它们彼此相邻：
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="MinVal">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="MaxVal">
</div>
</form>
Update Nr.1:Should you want to use .input-groupwith this example:
更新 Nr.1：如果你想使用.input-group这个例子：
<form action="" class="form-inline">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</div>
</form>
The class .input-groupis there to extend inputs with buttons and such (directly attached). Checkboxes or radio buttons are possible as well. I don't think it works with two input fields though.
该类.input-group用于使用按钮等（直接附加）扩展输入。复选框或单选按钮也是可能的。不过，我认为它不适用于两个输入字段。
Update Nr. 2:With .form-horizontalthe .form-grouptag basically becomes a .rowtag so you can use the column classes such as .col-sm-8:
更新编号 2：用.form-horizontal的.form-group标签基本上成为一个.row标签，所以你可以使用列类，如.col-sm-8：
<form action="" class="form-horizontal">
<div class="form-group">
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="MinVal">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="MaxVal">
</div>
</div>
</form>
回答by devnull
working workaround:
工作解决方法：
<div class="input-group">
<input type="text" class="form-control input-sm" value="test1" />
<span class="input-group-btn" style="width:0px;"></span>
<input type="text" class="form-control input-sm" value="test2" />
</div>
downside: no border-collapse between the two text-fields, but they keep next to each other
缺点：两个文本字段之间没有边界折叠，但它们彼此相邻
Update
更新
thanks to Stalinko
感谢斯大林科
This technique allows to glue more than 2 inputs.
Border-collapsing is achieved using "margin-left: -1px"(-2pxfor the 3rd input and so on)
这种技术允许粘合 2 个以上的输入。使用"margin-left: -1px"（-2px对于第三个输入等）实现边框折叠
<div class="input-group">
<input type="text" class="form-control input-sm" value="test1" />
<span class="input-group-btn" style="width:0px;"></span>
<input type="text" class="form-control input-sm" value="test2" style="margin-left:-1px" />
<span class="input-group-btn" style="width:0px;"></span>
<input type="text" class="form-control input-sm" value="test2" style="margin-left:-2px" />
</div>
回答by Anson Kao
It almost never makes intuitive sense to have two inputs next to each other without labels. Here is a solution with labels mixed in, which also works quite well with just a minor modification to existing Bootstrap styles.
在没有标签的情况下让两个输入彼此相邻几乎从来没有直观的意义。这是一个混合了标签的解决方案，只需对现有 Bootstrap 样式稍作修改，它也能很好地工作。
Preview:
预览：
HTML:
HTML：
<div class="input-group">
<span class="input-group-addon">Between</span>
<input type="text" class="form-control" placeholder="Type something..." />
<span class="input-group-addon" style="border-left: 0; border-right: 0;">and</span>
<input type="text" class="form-control" placeholder="Type something..." />
</div>
CSS:
CSS：
.input-group-addon {
border-left-width: 0;
border-right-width: 0;
}
.input-group-addon:first-child {
border-left-width: 1px;
}
.input-group-addon:last-child {
border-right-width: 1px;
}
JSFiddle:http://jsfiddle.net/yLvk5mn1/31/
JSFiddle：http : //jsfiddle.net/yLvk5mn1/31/
回答by Valeria Khusnulina
To show more than oneinputs inline withoutusing "form-inline" class you can use the next code:
要在不使用“ form-inline”类的情况下内联显示多个输入，您可以使用下一个代码：
<div class="input-group">
<input type="text" class="form-control" value="First input" />
<span class="input-group-btn"></span>
<input type="text" class="form-control" value="Second input" />
</div>
Then using CSS selectors:
然后使用 CSS 选择器：
/* To remove space between text inputs */
.input-group > .input-group-btn:empty {
width: 0px;
}
Basically you have to insert an empty spantag with "input-group-btn" class between inputtags.
基本上，您必须在输入标签之间插入一个带有“ input-group-btn”类的空跨度标签。
If you want to see more examples of input groups and bootstrap-select groups take a look at this URL: http://jsfiddle.net/vkhusnulina/gze0Lcm0
如果您想查看更多输入组和引导选择组的示例，请查看此 URL：http: //jsfiddle.net/vkhusnulina/gze0Lcm0
回答by Akash
If you want to include a "Title" field within it that can be selected with the <select>HTML element, that too is possible
如果您想在其中包含一个可以用<select>HTML 元素选择的“标题”字段，那也是可能的
PREVIEW
预览
CODE SNIPPET
代码片段
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-addon">
<select>
<option>Mr.</option>
<option>Mrs.</option>
<option>Dr</option>
</select>
</div>
<div class="input-group-addon">
<span class="fa fa-user"></span>
</div>
<input type="text" class="form-control" placeholder="Name...">
</div>
</div>
回答by boskop
Create a input-group-glue class with this:
用这个创建一个输入组胶水类：
.input-group-glue {
width: 0;
display: table-cell;
}
.input-group-glue + .form-control {
border-left: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" value="test1" />
<span class="input-group-glue"></span>
<input type="text" class="form-control" value="test2" />
<span class="input-group-glue"></span>
<input type="text" class="form-control" value="test2" />
</div>回答by Andrei Telteu
I have searched for this a few minutes and i couldn't find any working code.
我已经搜索了几分钟，但找不到任何工作代码。
But now i finaly did it ! Take a look:
但现在我终于做到了！看一看：
<div class="input-group" id="unified-inputs">
<input type="text" class="form-control" placeholder="MinVal" />
<input type="text" class="form-control" placeholder="MaxVal" />
</div>
And css
和CSS
#unified-inputs.input-group { width: 100%; }
#unified-inputs.input-group input { width: 50% !important; }
#unified-inputs.input-group input:last-of-type { border-left: 0; }
回答by Benne Otten
I was not content with any of the answers on this page, so I fiddled with this myself for a bit. I came up with the following
我对这个页面上的任何答案都不满意，所以我自己摆弄了一下。我想出了以下内容
angular.module('showcase', []).controller('Ctrl', function() {
var vm = this;
vm.focusParent = function(event) {
angular.element(event.target).parent().addClass('focus');
};
vm.blurParent = function(event) {
angular.element(event.target).parent().removeClass('focus');
};
});.input-merge .col-xs-2,
.input-merge .col-xs-4,
.input-merge .col-xs-6 {
padding-left: 0;
padding-right: 0;
}
.input-merge div:first-child .form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-merge div:last-child .form-control {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-merge div:not(:first-child) {
margin-left: -1px;
}
.input-merge div:not(:first-child):not(:last-child) .form-control {
border-radius: 0;
}
.focus {
z-index: 2;
}<html ng-app="showcase">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container">
<label class="control-label">Person</label>
<div class="input-merge" ng-controller="Ctrl as showCase">
<div class="col-xs-4">
<input class="form-control input-sm" name="initials" type="text" id="initials"
ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"
ng-model="person.initials" placeholder="Initials" />
</div>
<div class="col-xs-2">
<input class="form-control input-sm" name="prefixes" type="text" id="prefixes"
ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"
ng-model="persoon.prefixes" placeholder="Prefixes" />
</div>
<div class="col-xs-6">
<input class="form-control input-sm" name="surname" type="text" id="surname"
ng-focus="showCase.focusParent($event)" ng-blur="showCase.blurParent($event)"
ng-model="persoon.surname" placeholder="Surname" />
</div>
</div>
</body>
</html>With this it is possible to set the width of the individual inputs to your liking. Also a minor issue with the above snippets was that the input looks incomplete when focussed or when it is not valid. I fixed this with some angular code, but you can just as easily do this with jQuery or native javascript or whatever.
有了这个，就可以根据自己的喜好设置各个输入的宽度。上述代码片段的另一个小问题是，输入在聚焦或无效时看起来不完整。我用一些 angular 代码修复了这个问题，但你可以用 jQuery 或原生 javascript 或其他任何东西轻松地做到这一点。
The code adds the class .focus to the containing div's, so it can get a higher z-index then the others when the input is focussed.
代码将 .focus 类添加到包含的 div 中，因此当输入聚焦时，它可以获得比其他人更高的 z-index。
回答by TarranJones
My solution requires no additional css and works with any combination of input-addon, input-btn and form-control. It just uses pre-existing bootstrap classes
我的解决方案不需要额外的 css，可以使用 input-addon、input-btn 和 form-control 的任意组合。它只使用预先存在的引导程序类
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<form style="padding:10px; margin:10px" action="" class=" form-inline">
<div class="form-group">
<div class="input-group">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="MinVal">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="MaxVal">
</div>
</div>
</div>
</div>
</form>This will be inline if there is space and wrap for smaller screens.
如果有空间并为较小的屏幕换行，这将是内联的。
Full Example ( input-addon, input-btn and form-control. )
完整示例（输入插件、输入 btn 和表单控件。）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<form style="padding:10px; margin:10px" action="" class=" form-inline">
<div class="form-group">
<div class="input-group">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span></span>
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span></span>
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span></span>
</div>
</div>
<br>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
<span></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
</div>
</div>
</form>回答by Boy Suro
Combining two inputs, where the group take up all width (100%), and the size is not 50% - 50%, no additional css. I made it nicely by the following code:
组合两个输入，其中组占所有宽度（100%），大小不是 50% - 50%，没有额外的 css。我通过以下代码很好地做到了：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="form-group">
<label>Name</label>
<div class="input-group" style="width:100%">
<span class="input-group-btn" style="width:100px;">
<select class="form-control">
<option>Mr.</option>
<option>Mrs.</option>
<option>Dr</option>
</select>
</span>
<input class="form-control" id="name" name="name" placeholder="Type your name" type="text">
</div>
</div>
</form>
</div>