インプットグループ : MT7 Styleguide

フォーム要素と別要素をスペースなしで加えたい場合、<div class="input-group"> ... </div> でグループ化します。
インプットグループは flexbox を利用しているため、横幅を設定することができません。そこで、レイアウトで横幅を制御します（下参照）。
補助要素をインプットの前におきたい場合は .input-group-prepend、後に置きたい場合は .input-group-append が記述された要素を配置します。

基本形

以下のようなデザインパターンを採用する際も、label 要素は必ず記述してください。

@

.com

http://

.com

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="URL" aria-label="URL" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">.com</span>
  </div>
</div>
<br>
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">http://</span>
  </div>
  <input type="text" class="form-control" aria-label="URL">
  <div class="input-group-append">
    <span class="input-group-text">.com</span>
  </div>
</div>

ボタン

インプット要素とボタンを隣接させたい場合は、ボタン要素を.input-group-append が記述された要素で囲みます。

<div class="input-group">
  <input type="text" class="form-control" placeholder="キーワード" aria-label="キーワード">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">検索</button>
  </div>
</div>

ステッパー

<div class="input-group">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-default">-</button>
  </div>
  <input class="form-control mt-stepper" type="text" value="1" min="1" max="10">
  <div class="input-group-append">
    <button type="button" class="btn btn-default">+</button>
  </div>
</div>

レイアウト

フォーム要素を 2 つ並べたい場合。

コンテンツエリアの 1/4 の横幅をとりたい場合。

// コンテンツエリアの 1/4 の横幅をとりたい場合。
<div class="row">
  <div class="col-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <button type="button" class="btn btn-default">-</button>
      </div>
      <input class="form-control mt-stepper" type="text" value="1" min="1" max="10">
      <div class="input-group-append">
        <button type="button" class="btn btn-default">+</button>
      </div>
    </div>
  </div>
</div>