71

入力グループに 2 つの入力を含めるにはどうすればよいですか?

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

これは機能しません。インラインではなく水平です

4

11 に答える 11

117

回避策:

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

欠点: 2 つのテキスト フィールド間の境界線が崩れることはありませんが、隣り合ったままになります。

http://jsfiddle.net/EfC26/

アップデート

スタリンコに感謝

この手法により、2 つ以上の入力を接着できます。ボーダーの折りたたみは、 "margin-left: -1px"( -2px3 番目の入力など) を使用して実現されます。

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

于 2014-01-28T14:43:30.537 に答える
53

それらを隣り合わせにしたい場合：

<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 つの入力フィールドでは機能しないと思います。

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

3 つの例すべてで JSFiddle を更新

于 2013-09-23T08:10:17.880 に答える
11

「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タグの間に「 input-group-btn」クラスの空のspanタグを挿入する必要があります。

入力グループとブートストラップ選択グループの例をもっと見たい場合は、次の URL を見てください: http://jsfiddle.net/vkhusnulina/gze0Lcm0

于 2015-10-29T13:03:08.150 に答える
9

<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>
于 2016-01-28T09:14:32.563 に答える
2

このページのどの回答にも満足できなかったので、自分で少しいじりました。私は次のことを思いついた

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 にクラス .focus を追加するため、入力がフォーカスされたときに他のものよりも高い z-index を取得できます。

于 2015-12-03T17:18:40.117 に答える