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

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/

更新

感谢Stalinko

该技术允许粘合2个以上的输入.使用"margin-left: -1px"(-2px对于第3个输入等)实现边界折叠

<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是用按钮等扩展输入(直接连接).复选框或单选按钮也是可能的.我不认为它适用于两个输入字段.

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

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 "类的空span标记.

如果您想查看更多输入组和bootstrap-select组的示例,请查看以下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类:

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