Nhóm đầu vào - hai đầu vào gần nhau

Question

Làm cách nào để tạo nhóm đầu vào có hai đầu vào?

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

này không làm việc, họ ngang thay vì inline

Answer 1

Giả sử bạn muốn họ cạnh nhau:

<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

Cập nhật Nr. 1: Nếu bạn muốn sử dụng .input-group w thứ i ví dụ này:

<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

Lớp .input-group là có để mở rộng đầu vào với các nút và như vậy (trực tiếp kèm theo). Các hộp kiểm hoặc nút radio cũng có thể thực hiện được. Tôi không nghĩ rằng nó hoạt động với hai lĩnh vực đầu vào mặc dù.

Cập nhật Nr. 2: Với .form-horizontal thẻ .form-group về cơ bản trở thành một thẻ .row vì vậy bạn có thể sử dụng các lớp cột như .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

workaround làm việc:

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

Nhược điểm: không có biên giới -collapse giữa hai trường văn bản, nhưng chúng giữ cạnh nhau

http://jsfiddle.net/EfC26/

Cập nhật

nhờ Stalinko

Kỹ thuật này cho phép để keo hơn 2 đầu vào. Border-sụp đổ được thực hiện sử dụng "margin-left: -1px" (-2px cho đầu vào thứ 3 và vân vân)

<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

Tôi đã tìm kiếm này một vài phút và tôi không thể tìm thấy bất kỳ mã làm việc.

Nhưng bây giờ tôi đã làm xong! Hãy xem:

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

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

Nó gần như không bao giờ có ý nghĩa trực quan để có hai đầu vào cạnh nhau không có nhãn.Đây là một giải pháp với các nhãn hỗn hợp, cũng hoạt động khá tốt chỉ với một sửa đổi nhỏ đối với các kiểu Bootstrap hiện có.

Preview:

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

Tạo một lớp đầu vào-group-keo với điều này:

.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

Để hiển thị nhiều hơn một đầu vào inline mà không sử dụng "form-inline "bạn có thể sử dụng mã tiếp theo:

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

Sau đó sử dụng bộ chọn CSS:

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

Về cơ bản bạn phải chèn một trống khoảng tag với "đầu vào-group-BTN" lớp giữa đầu vào thẻ.

Nếu bạn muốn xem thêm ví dụ về nhóm đầu vào và nhóm bootstrap-select hãy nhìn vào URL này: http://jsfiddle.net/vkhusnulina/gze0Lcm0

Answer 7

tôi đã không hài lòng với bất kỳ các câu trả lời trên trang này, vì vậy tôi fiddled với điều này bản thân mình một chút. Tôi đã đưa ra những điều sau

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>

Với điều này chúng ta có thể thiết lập độ rộng của các đầu vào cá nhân theo ý thích của bạn. Ngoài ra, một vấn đề nhỏ với các đoạn mã trên là đầu vào trông không đầy đủ khi tập trung hoặc khi nó không hợp lệ. Tôi cố định điều này với một số mã góc, nhưng bạn có thể dễ dàng làm điều này với jQuery hoặc javascript gốc hoặc bất cứ điều gì.

Mã sẽ thêm lớp .focus vào div chứa, vì vậy nó có thể nhận được chỉ mục z cao hơn, sau đó các chỉ mục khác khi đầu vào được tập trung.

Answer 8

Giải pháp của tôi không yêu cầu thêm css và hoạt động với bất kỳ kết hợp đầu vào-addon, đầu vào-btn và kiểm soát biểu mẫu.

Nó chỉ sử dụng tồn tại trước lớp bootstrap

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

Nếu bạn muốn bao gồm một "Tiêu đề" bên trong nó có thể được lựa chọn với <select> HTML phần tử, điều đó cũng có thể là

PREVIEW

ĐOẠN MÃ

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