Twitter bootstrap 输入组-两个相互靠近的输入

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

---

这不起作用，它们是水平的，而不是内联的，假设您希望它们彼此相邻：

更新编号1:是否要使用

。输入组

与此示例一起使用：

@
.00

类

.input组

用于通过按钮等（直接连接）扩展输入。也可以使用复选框或单选按钮。但我认为它不适用于两个输入字段

更新第2条：使用

.form horizontal

将

.form group

标记基本上变成

.row

标记，因此您可以使用列类，如

.col-sm-8

：

工作变通方法：

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

更新

多亏了

这种技术允许粘合2个以上的输入。 边框折叠是通过使用

“左边距：-1px”

（

-2px

用于第三个输入，依此类推）实现的

---

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

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

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

---

)让两个输入相邻而没有标签几乎没有任何直观的意义。这是一个混合了标签的解决方案，只需对现有的引导样式进行一个小的修改，它也可以很好地工作

预览：

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>

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

---

使用以下内容创建输入组粘合类：

。输入组胶水{
宽度：0；
显示：表格单元格；
}
.input group glue+.form控件{
左边界：无；
}

---

要使用“表单内联”类内联显示多个输入，而不使用，您可以使用下一个代码：

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

基本上，您必须在input标记之间插入一个带有“input group btn”类的空span标记

如果您想查看输入组和引导选择组的更多示例，请查看以下URL：

---

我对本页上的任何答案都不满意，所以我自己做了一些修改。我得出了以下结论

angular.module（'showcase'，[]）.controller（'Ctrl'，function（）{
var vm=这个；
vm.focusParent=函数（事件）{
元素（event.target）.parent（）.addClass（'focus'）；
};
vm.blurParent=函数（事件）{
angular.element（event.target）.parent（）.removeClass（'focus'）；
};
});
.input merge.col-xs-2，
.input merge.col-xs-4，
.输入合并.col-xs-6{
左侧填充：0；
右边填充：0；
}
.input合并div:第一个子.form控件{
边框右上角半径：0；
边框右下半径：0；
}
.input merge div:最后一个子窗体控件{
边框左上半径：0；
边框左下半径：0；
}
.输入合并div:not（：第一个子级）{
左边距：-1px；
}
.input合并div:not（：第一个子项）：not（：最后一个子项）。窗体控件{
边界半径：0；
}
.焦点{
z指数：2；
}

人
我的解决方案不需要额外的css，可以与输入插件、输入btn和表单控件的任何组合一起使用。
它只使用预先存在的引导类



如果您想在其中包含一个“Title”字段，该字段可以通过
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>


先生
夫人
博士
组合两个输入，其中组占据所有宽度（100%），大小不是50%-50%，没有额外的css。我通过以下代码很好地实现了它：



名称
先生
夫人
博士
使用Bootstrap 4.1，我找到了按百分比计算的宽度解决方案：

以下显示了包含4个元素的输入组：1个文本和3个选择-工作正常：



正文：
选项
选项
选项
我想使用水平表单，但在一行中我需要2inputs@JohnSmith：如果您使用的是form horizontal，那么您使用的是网格系统，因此您也需要col-attributes。我已经添加了第三个示例来演示这项技术。
中缺少
。
水平
表单的问题是，当屏幕较小时（并且使用
xs
样式），两个输入在单独的行上（如果有人想使其响应，这很好），但是他们之间没有空间。这种情况下的解决方案是什么？没有任何附加CSS或修改的最佳答案+1“两个输入相邻而没有标签几乎没有任何直观意义。”-我的用例指定了“从年到年”的范围。它在一个搜索页面上，所以空间是一个大问题。@user2524350很公平，只是为那些可能没有相同限制的人提供了一个解决方案。CheeserCredit卡到期日期、花名册开始和结束时间、银行账户BSB号码、连字符的产品代码。我不到10%通过CRM，我已经找到了内联字段的以下4个直观原因。毛皮
/* To remove space between text inputs */
.input-group > .input-group-btn:empty {
    width: 0px;
}

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