MVCビューでブートストラップボタンのアドオンを使用するにはどうすればいいですか？

Question

MVCビューでブートストラップのbutton addonsが機能しなくなっています。私は最新のNuGetバージョンのASP.NET MVC（5.1 rc1）とブートストラップ（3.03）を使用しています。

私は（今私はそれが動作するようになっての試みで、バックではなくHtml.EditorFor()を使用するよりも、単に手でコード化されたHTMLにそれを切り詰めてきたことを）私の見解では、次のしている：

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     @Html.ValidationSummary(true) 

     <div class="row"> 
      <div class="col-lg-6"> 
       <div class="input-group"> 
        <input type="text" class="form-control" /> 
        <span class="input-group-btn"> 
         <button class="btn btn-default" type="button">Go!</button> 
        </span> 
       </div> 
      </div> 
      <div class="col-lg-6"> 
       &nbsp; 
      </div> 
     </div> 

これが発生以下のHTML：

<form action="xxx" method="post"> 
<input name="__RequestVerificationToken" type="hidden" value="T3k..." /> 
<div class="form-horizontal"> 
    <div class="row"> 
     <div class="col-lg-6"> 
      <div class="input-group"> 
       <input type="text" class="form-control" /> 
       <span class="input-group-btn"> 
        <button class="btn btn-default" type="button">Go!</button> 
       </span> 
      </div> 
     </div> 
     <div class="col-lg-6"> 
      &nbsp; 
     </div> 
    </div> 
</div> 
</form> 

問題は、これは、ブラウザ（クローム32/IE 11）に表示されている場合、入力ボックスとボタンの間には大きなギャップがあります、ということです。このように：私はcol-lg-3以下にinput-groupdivを取り巻くdivのサイズを小さくした場合

、それは大丈夫です。しかし、それより大きなものはどんなギャップも残します。

input上の最大サイズはありますかのようにそれはだ - そして実際、私のすべてのinputsがこれを引き起こしている可能性が何

...そのコンテナdiv小さいように見えるのですか？

Answer 1

新しいMVC 5プロジェクトに付属するデフォルトのSite.cssスタイルシートには、入力の最大幅を制限するルールがあります。あなたが得ているのは、想定されているような利用可能な全幅にわたるコントロールの結果ですが、入力そのものが定義された幅に制限されています。そのスタイルシートの一部をコメントアウトするだけで、すべてがうまくいくはずです。

/* Set width on the form input elements since they're 100% wide by default */ 
input, 
select, 
textarea { 
    max-width: 280px; 
} 

それはチームがすぐにサンプルサイトを構築するために取られているように見えるかなり悪質なショートカットです。