HTML入力テキストとボタンの間のブートストラップ距離を修正する方法（量管理機能の場合）

Question

私は自分のウェブサイトの数量制御機能を作るためにTwitter Bootstrapを使用しています。下のコードスニペットでわかるように、このコントロールのテキスト入力を38ピクセル幅にしたいと考えています。私のテーブルのセルが38pxよりも小さいときは、すべてうまく動作します。しかし、大きなもの（タイトルのようなもの）を私の数量コントロールブレーキを部品に入れると！

私の質問は、ブートストラップの入力テキストとボタンの距離をゼロにする方法です。

私はセルの長さに関係なく、これを達成したい：私はすべての3つの要素の親に新しいクラスquantity-wrapperを追加

.quantity-style { 
 
    text-align: center; 
 
    min-width: 38px; 
 
    max-width: 38px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 

 
<table border="1" style="margin-left: 50px; margin-top: 50px;"> 
 

 
<tr> 
 
    <td style="padding: 10px;"> 
 
     Hello - This is a test with big title 
 
    </td> 
 
</tr> 
 

 
<tr> 
 
    <td style="padding: 10px;"> 
 

 
     <div class="input-group"> 
 

 
      <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default btn-number btn-sm" disabled="disabled" data-type="minus" data-field="quant[2]"> 
 
       <span class="glyphicon glyphicon-minus"></span> 
 
      </button> 
 
      </span> 
 
     \t \t \t 
 
      <input type="text" name="quant[2]" class="form-control input-number input-sm quantity-style" value="0" min="0" max="15"> 
 
     
 
      <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default btn-number btn-sm" data-type="plus" data-field="quant[2]"> 
 
       <span class="glyphicon glyphicon-plus"></span> 
 
      </button> 
 
      </span> 
 

 
     </div> 
 
\t \t \t 
 
    </td> 
 
</tr> 
 
\t 
 
</table>

Answer 1

[ - | 0 | + ]

次に、スタイルを希望の幅に設定します38px

のそれをチェックアウト：スニペットで

.quantity-style{ 
 
    text-align: center; 
 
    min-width: 38px; 
 
    max-width: 38px; 
 
} 
 

 
.quantity-wrapper{ 
 
    width: 38px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 

 
<table border="1" style="margin-left: 50px; margin-top: 50px;"> 
 

 
<tr> 
 
    <td style="padding: 10px;"> 
 
     Hello - This is a test with big title 
 
    </td> 
 
</tr> 
 

 
<tr> 
 
    <td style="padding: 10px;"> 
 

 
     <div class="input-group quantity-wrapper"> 
 

 
      <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default btn-number btn-sm" disabled="disabled" data-type="minus" data-field="quant[2]"> 
 
       <span class="glyphicon glyphicon-minus"></span> 
 
      </button> 
 
      </span> 
 
     \t \t \t 
 
      <input type="text" name="quant[2]" class="form-control input-number input-sm quantity-style" value="0" min="0" max="15"> 
 
     
 
      <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default btn-number btn-sm" data-type="plus" data-field="quant[2]"> 
 
       <span class="glyphicon glyphicon-plus"></span> 
 
      </button> 
 
      </span> 
 

 
     </div> 
 
\t \t \t 
 
    </td> 
 
</tr> 
 
\t 
 
</table>