輸入組 - 兩個互相靠近的輸入

Question

如何讓輸入組涉及兩個輸入？

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

這是不行的，它是水平的，而不是內聯

Answer 1

假設你希望他們彼此相鄰：

<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 w第i個本實施例中：

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

Updated JSFiddle with all three examples

Answer 2

工作解決方法：

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

...我已經尋找這幾分鐘，我找不到任何工作代碼來實現的。

但現在我最終做到了！請看：

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

它幾乎從不具有直觀意義有兩個輸入彼此相鄰的沒有標籤。這是一個混合了標籤的解決方案，只需對現有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 5

與此創建一個輸入基團的膠類：

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

要顯示多於一個輸入直列，而無需使用「形式列直插 「班級可以使用下面的代碼：

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

基本上，你必須插入一個空跨度標籤 「輸入組BTN」 輸入標籤之間的階級。

如果你想看到輸入組和自舉選團的更多的例子來看看這個網址： http://jsfiddle.net/vkhusnulina/gze0Lcm0

Answer 7

我並不滿足於任何此頁面上的答案，所以我用這個撥弄我自己一點。我想出了以下

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或其他方法輕鬆地做到這一點。

代碼將class .focus添加到包含div的div中，因此當輸入被聚焦時，它可以獲得更高的z-index，然後獲得更高的z-index。

Answer 8

我的解決方案不需要額外的css，可以與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 9

如果您希望包括可與<select> HTML可以選擇在其中一個「標題」字段元素，這也是可能

PREVIEW

代碼段

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