input组 – 两个input彼此靠近
我怎样才能使input组涉及两个input？
<div class="input-group"> <input type="text" class="form-control" placeholder="MinVal"> <input type="text" class="form-control" placeholder="MaxVal"> </div> 这是行不通的，它们是水平的而不是内联的
假设你希望他们彼此相邻：
<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>
的jsfiddle
更新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>
的jsfiddle
类.input-group在那里用button等（直接附加）来扩展input。 checkbox或单选button也是可能的。 我不认为它可以处理两个input字段。
更新Nr。 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>
用这三个例子更新了JSFiddle
工作解决方法：
<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>
缺点：两个文本字段之间没有边界崩溃，但是它们彼此相邻
更新
感谢Stalinko
这种技术可以粘贴2个以上的input。 使用"margin-left: -1px" （第三个input为-2px等等）实现边框-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>
有两个input没有标签的情况下，几乎没有直观的意义。 这是一个混合了标签的解决scheme，只需对现有的Bootstrap样式稍作修改即可。
预习： 
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：
.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/
要在线显示多个input， 而不使用“ 单行 ”类，则可以使用下一个代码：
<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>
然后使用CSSselect器：
/* To remove space between text inputs */ .input-group > .input-group-btn:empty { width: 0px; }
基本上你必须在input标签之间插入一个带有“ input-group-btn ”类的空的span标签。
如果您想查看更多input组和引导程序select组的示例，请查看以下URL： http : //jsfiddle.net/vkhusnulina/gze0Lcm0
如果你想在其中包含一个可以用<select> HTML元素<select>的“Title”字段，那也是可以的
预习 
代码片段
<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>
我已经search了这几分钟，我找不到任何工作代码。
但现在我最终做到了！ 看一看：
<div class="input-group" id="unified-inputs"> <input type="text" class="form-control" placeholder="MinVal" /> <input type="text" class="form-control" placeholder="MaxVal" /> </div>
和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; }
用下面的方法创build一个input-group-glue类：
.input-group-glue { width: 0; display: table-cell; } .input-group-glue + .form-control { border-left: none; }
<link href="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>
我的解决scheme不需要额外的CSS，并与input插件，input-BTN和forms控制的任何组合工作。
它只是使用预先存在的引导类
的jsfiddle
<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>
我不满足于这个页面上的任何答案，所以我自己弄了一下。 我想出了以下几点
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="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>
