我如何在我的MVC視圖中使用引導按鈕插件

Question

我很難讓Bootstrap的button addons在我的MVC視圖中工作。我正在使用最新的NuGet版本的ASP.NET MVC（5.1 rc1）和Bootstrap（3.03）。

我有我的看法（現在我已經削減它回到剛纔的手工編碼的HTML，而不是使用Html.EditorFor()，企圖得到它的工作）以下內容：

@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> 

的問題在於，當該顯示在瀏覽器（Chrome 32/IE 11），有輸入框和按鈕之間有很大的差距。就像這樣：

如果我減少周邊input-groupdiv到col-lg-3或更小的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; 
} 

這是一個非常令人震驚的捷徑，球隊爲了快速構建樣本網站似乎已經採取了一些措施。