twitter-bootstrap - 输入组 - 两个彼此靠近的输入

Question

如何使输入组涉及两个输入？

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

这不起作用，它们是水平的而不是内联的

Answer 1

解决方法：

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

更新

感谢斯达林科

这种技术允许粘合超过 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>

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

Answer 2

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

Answer 3

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

<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

Answer 4

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

Answer 5

如果您想在其中包含一个可以使用<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>

Answer 6

用这个创建一个输入组胶水类：

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

Answer 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/）

Answer 8

我对这个页面上的任何答案都不满意，所以我自己摆弄了一下。我想出了以下

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。

Answer 9

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

Answer 10

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

Answer 11

结合两个输入，其中组占据所有宽度（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>