Входная группа - два входа близко друг к другу

Как я могу сделать входную группу включает в себя два входа?



<div class="input-group">

    <input type="text" class="form-control" placeholder="MinVal">

    <input type="text" class="form-control" placeholder="MaxVal">

</div>


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

687   10  

10 ответов:

если вы хотите, чтобы они рядом друг с другом:

<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

Обновление № 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 есть ли для расширения входов с кнопками и такими (непосредственно прилагается). Также можно установить флажки или переключатели. Я не думаю, что это работает с двумя полями ввода, хотя.

Обновление № 2: С .form-horizontal the .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 со всеми тремя примерами

40  
2013-09-23 13:06:06

рабочий обход:

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

99  
2017-05-23 14:54:48

это почти никогда не имеет интуитивного смысла иметь два входа рядом друг с другом без меток. Вот решение с метками, смешанными, которое также хорошо работает с незначительной модификацией существующих стилей начальной загрузки.

анонс: enter image description here

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/

60  
2015-02-04 23:28:07

показать более одного inputs inline без через " form-inline" Class, вы можете использовать следующий код:

<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" между вход теги.

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

9  
2015-10-29 15:03:08

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

предварительный просмотр enter image description here

КОД

<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>
9  
2016-01-28 11:36:31

создайте класс 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>
8  
2015-07-09 13:55:03

Я искал это несколько минут, и я не мог найти любой код, который работает.

но теперь я наконец сделал это ! Взгляните:

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

6  
2014-08-18 02:33:51

Я не был доволен ни одним из ответов на этой странице, поэтому я немного поиграл с этим сам. Я придумал следующее

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 или что-то еще.

код добавляет класс .сосредоточьтесь на содержании div, чтобы он мог получить более высокий Z-индекс, чем другие, когда вход фокусируется.

2  
2015-12-03 19:18:40

мое решение не требует дополнительного 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>
2  
2015-12-10 19:33:11

объединение двух входов, где группа занимает всю ширину (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>
0  
2018-08-04 05:41:57

Comments

    Ничего не найдено.
Click here to cancel reply.