ブートストラップタグ入力とボタンの位置合わせ

Question

enter image description here

私はウェブサイトを作成しようとしていますが、私は、CSSやHTMLに新しいですので、私は苦労それをやってを持っています。だからここに問題がある。 写真では、「原料を含むと除外する」と「+」と「 - 」の2つのバーを一緒に添付する必要がありますが、そうではありません。誰かが私を助けてくれますか？ここで

は、HTMLコードです：

<div class="well well-white well-sm hidden-sm hidden-xs menu"> 
    <div class="input-group"> 
     <input type="text" class="form-control" value="" data-role="tagsinput" id="includeIngredientsLG" placeholder="Include ingredients"> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-plus"></span> 
     </span> 
     <input type="text" class="form-control" value="" data-role="tagsinput" id="excludeIngredientsLG" placeholder="Exclude ingredients" style="margin-left: 3px;"> 
     <span class="input-group-addon"> 
      <span class="glyphicon glyphicon-minus"></span> 
     </span> 
    </div> 
</div> 

Answer 1

.bootstrap-tagsinput

.bootstrap-tagsinput { 
    display:table-cell 
} 

作業のデモのためのCSSを追加します。http://codepen.io/anon/pen/EWeKbM

input-group<input class="form-control"がdisplay: table-cell CSSプロパティを持っていながら、display: table CSSプロパティを持っています。

定義されていないがtable-cellを持っている子要素のwidthは、table-cellプロパティと、次の子要素、（のはwidth: 100pxを言わせて）定義されている場合は、はスペースの残りの部分を記入します。

内容内input-groupは自動的にサイズ変更されます。サイズを縮小する必要はありません。

Answer 2

あなたはこのスニペットを試すことができます。私はそれぞれの入力とアドオンを自分のグループに分割しました。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="well well-white"> 
 
    <div class="input-group"> 
 
    <input type="text" class="form-control" value="" data-role="tagsinput" id="includeIngredientsLG" placeholder="Include ingredients"> 
 
    <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-plus"></span> 
 
    </span> 
 

 
    </div> 
 

 
    <div class="input-group"> 
 
    <input type="text" class="form-control" value="" data-role="tagsinput" id="excludeIngredientsLG" placeholder="Exclude ingredients" style="margin-left: 3px;"> 
 
    <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-minus"></span> 
 
    </span> 
 
    </div> 
 
</div>

Answer 3

このような何かを試してみてください。

<!-- Latest compiled and minified CSS --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
\t <!-- jQuery library --> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
\t <!-- Latest compiled JavaScript --> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="well well-white well-sm menu"> 
 
    \t <div class="input-group"> 
 
     \t \t <input type="text" class="form-control" value="" data-role="tagsinput" id="includeIngredientsLG" placeholder="Include ingredients"> 
 
      <span class="input-group-addon"> 
 
       <span class="glyphicon glyphicon-plus"></span> 
 
      </span> 
 
      <input type="text" class="form-control" value="" data-role="tagsinput" id="excludeIngredientsLG" placeholder="Exclude ingredients" style="margin-left: 3px;"> 
 
      <span class="input-group-addon"> 
 
       <span class="glyphicon glyphicon-minus"></span> 
 
      </span> 
 
     </div> 
 
    </div>