文件上載在引導MVC

Question

格式化我有這樣的一個MVC視圖

<form id="fileupload" action="@Url.Action("Save")" method="POST" enctype="multipart/form-data"> 
<div class="container"> 
    <div class="row"> 
     <div class="form-group"> 
      <label for="datepicker1">Invoice Date</label> 
      <div class='bfh-datepicker' id='datepickerDiv'> 
       <input type='text' id="datepicker1" class="form-control" /> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label for="InvoiceNumberTB">Invoice Number</label> 
      <input type="text" class="form-control" id="InvoiceNumberTB" /> 
     </div> 

     <div class="form-group"> 
      <label for="NetAmountTB">Net Amount</label> 
       <input type="text" id="NetAmountTB" class="form-control text-right" placeholder="0.00" /> 
     </div> 

     <div class="form-group"> 
      <label for="TaxAmountTB">Sales Tax</label> 
      <input type="text" id="TaxAmountTB" class="form-control text-right" placeholder="0.00" /> 
     </div> 

     <div class="form-group"> 
      <label for="InvoiceTotalTB">Invoice Total</label> 
      <input type="text" id="InvoiceTotalTB" class="form-control text-right" placeholder="0.00" /> 
     </div> 

     <div class="form-group"> 
      <label for="InvoiceDescriptionTB">Description</label> 
      <input type="text" id="InvoiceDescriptionTB" class="form-control" /> 
     </div> 

     <div class="form-group"> 
      <label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label> 
      <span class="btn btn-success fileinput-button"> 
       <span>Add File...</span> 
       <input type="file" id="DocumentUploadTB" class="form-control" /> 
      </span> 
     </div> 

     <div class="form-group"> 
      <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus-sign"></span> Save</button> 
     </div> 

    </div> 
</div> 

但對文件上傳標籤不格式化，因爲我本來希望（在外地的頂部，其他的），但看起來像這樣

有人能指出我在正確的方向？

感謝

Answer 1

裹在form-control-staticdiv標籤後的內容，並失去對input的form-control類：

<div class="form-group"> 
     <label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label> 
     <div class="form-control-static"> 
      <span class="btn btn-success fileinput-button"> 
       <span>Add File...</span> 
       <input type="file" id="DocumentUploadTB" /> 
      </span> 
     </div> 
    </div> 

Answer 2

您希望您的btnspan顯示爲一個塊級元素。嘗試添加display: block;風格，或者使用一個簡單的引導工具類像.show：

<div class="form-group"> 
    <label for="DocumentUploadTB">Optional - Upload Invoice (PDF)</label> 
    <span class="btn btn-success fileinput-button show"> 
     <span>Add File...</span> 
     <input type="file" id="DocumentUploadTB" class="form-control" /> 
    </span> 
</div> 

例子：http://codepen.io/kspearrin/pen/PqpgYq