输入组-两个输入彼此靠近

67

如何使输入组包含两个输入？

<div class="input-group">
    <input type="text" class="form-control" placeholder="MinVal">
    <input type="text" class="form-control" placeholder="MaxVal">
</div>

这不起作用，它们是水平的而不是嵌入式的

twitter-bootstrap  twitter-bootstrap-3 
— UnknownError1337
source
我的解决方案不需要额外的CSS，并且可以与input-addon，input-btn和form-control的任何组合一起使用。它仅使用预先存在的引导程序类stackoverflow.com/a/34208228/2273611
— TarranJones，2015年

Answers:

50

假设您希望它们彼此相邻：

<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在那里扩展带有按钮等（直接附加）的输入。也可以使用复选框或单选按钮。我认为它不适用于两个输入字段。

更新编号。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

— 亚历山大·雷希施泰纳
source
我想使用水平表单，但是在一行中我需要2个输入
— UnknownError1337 2013年
1
@JohnSmith：如果您使用的是水平窗体，那么您使用的是网格系统，因此也需要col-属性。我添加了第三个示例来演示此技术。
— Alexander Rechsteiner
有<div class="clearfix"></div> 失踪内<div class="form-group">...</div>
— 彼得·Kowalczuk
1
问题form-horizontal在于，当屏幕较小（并使用xs样式）时，两个输入位于单独的行上（这很好，如果有人希望使其响应），但它们之间没有空间。在这种情况下，解决方案是什么？
— True Soft
无需任何其他CSS或修改+1的最佳答案
— zanderwar 2015年
115

解决方法：

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

缺点：两个文本字段之间没有边框折叠，但它们彼此相邻

http://jsfiddle.net/EfC26/

更新资料

感谢Stalinko

此技术允许粘贴两个以上的输入。使用"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>

http://jsfiddle.net/yLvk5mn1/1/

— 恶魔
source
3
您将如何更改这些输入的宽度？始终为50/50。
— Daniel van Flymen '16
不要忘记指定填充，因为即使宽度为零元素也仍然具有填充。
— Alex Zhukovskiy
感谢您的解决方案。因为插件的大小与输入框的大小不成比例，所以input-group-btn对我来说效果更好input-group-addon。
— Anupam
添加border-left: 0;到第二个输入将折叠边框
— Mbengue Assane
我喜欢border设置输入的样式，而不是设置-ve边距。就像设置border-right: 0;为第一个输入，border-left: 0;最后一个输入以及border-left: 0; border-right: 0;所有其他输入一样简单.input-group（来自@MbengueAssane注释的启发）。否则，使用-ve边距将.form-group在.input-group
— Fr0zenFyr
70

几乎没有标签的情况下，两个输入彼此相邻几乎没有直觉。这是一个混合了标签的解决方案，对现有的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/

— 高
source
1
“在没有标签的情况下使两个输入彼此相邻几乎没有直观的意义。” -我的用例指定了“从年-直到年”的范围。它在搜索页面上，因此空间非常重要。
— minexew 2015年
1
@ user2524350很公平，只为可能没有相同约束的人提供解决方案。干杯
— Anson Kao 2015年
7
信用卡到期日期，花名册开始和结束时间，银行帐户BSB号，带连字符的产品代码。我通过CRM的比例还不到10％，而且我已经找到内联字段的这四个直观原因。此外，Bootstrap支持inline字段，.form-group并且.row并存。
— zanderwar
2
您应该选择度量单位时忘记了方案。例如，如果您有一个整数字段，然后选择Bytes/KBytes/MBytes/...，则始终希望它们尽量彼此靠近。
— Alex Zhukovskiy
即使您不希望在它们之间使用标签，也可以正常工作，只需class="input-group-addon"在课程
— 中将
10

要在不使用“ 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>

然后使用CSS选择器：

/* To remove space between text inputs */
.input-group > .input-group-btn:empty {
    width: 0px;
}

基本上，您必须在输入标签之间插入一个带有“ input-group-btn ”类的空跨度标签。

如果要查看输入组和引导选择组的更多示例，请查看以下URL：http : //jsfiddle.net/vkhusnulina/gze0Lcm0

— 瓦莱里亚（Valeria Khusnulina）
source
9

如果要在其中包含可以通过<select>HTML元素选择的“标题”字段，则也可以

预习 在此处输入图片说明

代码片段

<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>
— 阿卡什
source
目前，这是唯一使用引导程序和输入组的答案。这是使用上面代码的稍微增强版本的jsfiddle
— musicin3d
8

使用以下命令创建一个input-group-glue类：

.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>
展开摘要

— 博斯科普
source
7

我已经搜索了几分钟，但找不到任何工作代码。

但是现在我终于做到了！看一看：

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

http://jsfiddle.net/4Ln8d7zq/）

— 安德烈·泰尔特（Andrei Telteu）
source
1
如果我有3个输入怎么办？
— Fr0zenFyr
1
已更新以获取无限数量的输入jsfiddle.net/kgby6qfn/4现在，您可以添加所需的输入数量。但是，这是一个旧的解决方案。如果您更新到最新版本的引导，没有这种支持：getbootstrap.com/docs/4.3/components/input-group/...
— 安德烈Telteu
2

我对此页面上的任何答案都不满意，所以我自己弄了一些。我提出以下

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>
展开摘要

这样就可以根据自己的喜好设置各个输入的宽度。上述片段的一个小问题是，在聚焦或无效时，输入看起来不完整。我用一些角度代码解决了这个问题，但是您可以轻松地使用jQuery或本机javascript或任何其他方式来实现。

该代码将类.focus添加到包含div的类中，因此在对输入进行聚焦时，它可以获得比其他索引更高的z-index。

— 本尼·奥滕
source
如何转换成正常功能？因为我不了解角度...我无法理解您代码的逻辑
— Abu Ayyub
@AbuAyyub答案中的角度代码与样式无关。它可能只是为了完整性
— Fr0zenFyr
2

我的解决方案不需要额外的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>
展开摘要

如果有足够的空间并可以换成较小的屏幕，这将是嵌入式的。

完整示例（input-addon，input-btn和form-control。）

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>
展开摘要

— 塔兰·琼斯
source
甚至没有回答问题
— Fr0zenFyr
0

组合两个输入，其中组占用所有宽度（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>
展开摘要

— 男孩苏罗
source
0

使用Bootstrap 4.1，我发现了按百分比的宽度解决方案：

下面显示了具有4个元素的输入组：1个文本和3个选择-效果很好：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="input-group input-group-sm">
	<div class="input-group-prepend">
		<div class="input-group-text">TEXT:</div>
	</div>
	<select name="name1" id="name1" size="1" style="width:4%;" class="form-control">
		<option value="">option</option>
		<!-- snip -->
	</select>				
	<select name="name2" id="name2" size="1" style="width:60%;" class="form-control">
		<option value="">option</option>
		<!-- snip -->
	</select>					
	<select name="name3" id="name3" size="1" style="width:25%;" class="form-control">
		<option value="">option</option>
		<!-- snip -->
	</select>
</div>
展开摘要

— 德克
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.