bootstrapでinput-group-btnを使ったときのwidthの変更方法

ググっても有力な情報が見つからなかったので備忘として記録。

<div class="input-group">
  <%= f.text-field :name, class: "form-control" %>
  <span class="input-group-btn">
    <f.submit "更新", class: "btn btn-primary" %>
    <%= button_tag class: "btn btn-default", type: :button do %>
      <span class="glyphicon glyphicon-remove"></span>
    <% end %>
  </span>

こんなviewに対してcssを適用。

.input-group {
  width: 120%;
  padding: 0;
  margin: 0;
  .input-group-btn {
    width: auto;
  }
}

どこで使うかというとテーブル内に入力フォームを生成するとき。

テーブルだと各tdが中身に応じてwidthが可変となってくれるがinput-group-btnを使うと目一杯広がってしまい他のtdを圧迫したために最適な幅で表示したいと思い実装。

.input-groupのwidthは100%でも良いがinput-group-btnに存在する謎のpadding（0指定しても消えない） によりtd要素内における幅が食われてしまうため120%に指定。あまり良い例ではないかもしれないがこうすることでtd目一杯に広げ且つ他td要素への影響がないフォームを作成出来た。