Группа ввода - два входа близко друг к другу

Как я могу создать группу ввода, включающую два входа?

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

Это не работает, они являются горизонтальными, а не встроенными

Ответы

Ответ 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 в этом примере:

<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 со всеми тремя примерами

Ответ 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 для третьего входа и т.д.)

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

Ответ 3

Это почти никогда не делает интуитивный смысл иметь два входа рядом друг с другом без ярлыков. Вот решение с смешанными метками, которое также хорошо работает с незначительной модификацией существующих стилей 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/

Ответ 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;
}

В основном вам нужно вставить пустой тег span с классом "input-group-btn" между тегами input.

Если вы хотите увидеть больше примеров групп ввода и групп выбора бутстрапа, посмотрите на этот URL-адрес: http://jsfiddle.net/vkhusnulina/gze0Lcm0

Ответ 5

Если вы хотите включить в него поле "Заголовок", которое можно выбрать с помощью элемента <select> HTML, это тоже возможно

АНОНС

CODE SNIPPET

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

Ответ 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>

Ответ 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/)

Ответ 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>

Ответ 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>

Ответ 10

Объединение двух входов, где группа занимает всю ширину (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>

Ответ 11

С помощью Bootstrap 4.1 я нашел решение по ширине в процентах:

Ниже показана группа ввода с 4 элементами: 1 текст и 3 выделения - работают хорошо:

<link rel="stylesheet" href="#" onclick="location.href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'; return false;" 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>