輸入不填充mvc視圖中的自舉列的整個寬度

Question

我有最難得到我的輸入來填充MVC 5項目中引導列的最大寬度的時間。我添加了一個視圖並將佈局頁面添加到視圖中（沒有什麼奇怪的，只是一個典型的MVC項目附帶的普通佈局頁面）。如果您運行我提供的代碼片段，我的輸入將填充引導列的給定寬度，但是當我在我的應用程序中運行此代碼時，它不填充列的寬度。

有什麼特別的東西會導致我的屏幕截圖看起來像它一樣，而不是它是如何在我的代碼段？

這裏是

.max-size { 
 
    width: 100% !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="form-horizontal"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="col-md-1" style="background:blue">col-md-1</div> 
 
     <div class="col-md-1" style="background:red">col-md-1</div> 
 
     <div class="col-md-1" style="background:purple">col-md-1</div> 
 
     <div class="col-md-1" style="background:yellow">col-md-1</div> 
 
     <div class="col-md-1" style="background:green">col-md-1</div> 
 
     <div class="col-md-1" style="background:orange">col-md-1</div> 
 
     <div class="col-md-1" style="background:blue">col-md-1</div> 
 
     <div class="col-md-1" style="background:red">col-md-1</div> 
 
     <div class="col-md-1" style="background:purple">col-md-1</div> 
 
     <div class="col-md-1" style="background:yellow">col-md-1</div> 
 
     <div class="col-md-1" style="background:green">col-md-1</div> 
 
     <div class="col-md-1" style="background:orange">col-md-1</div> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-md-3"> 
 
     ABC 
 
     </div> 
 

 
     <div class="col-md-6"> 
 
     <div class="row max-size"> 
 
      <div class="col-md-12"> 
 

 
      <div class="form-group"> 
 
       <div class="col-md-12"> 
 
       <input class="form-control max-size" style="width:100%;" placeholder="Department" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <div class="col-md-12"> 
 
       <input class="form-control max-size" placeholder="Department" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <div class="col-md-12"> 
 
       <input class="form-control max-size" placeholder="Department" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <div class="col-md-12"> 
 
       <input class="form-control max-size" placeholder="Department" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <div class="col-md-12"> 
 
       <input class="form-control max-size" placeholder="Department" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <div class="col-md-12"> 
 
       <input class="form-control max-size" placeholder="Department" /> 
 
       </div> 
 
      </div> 
 

 
      </div> 
 
     </div> 
 

 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      <div class="form-group"> 
 
       <div class="col-md-5"> 
 
       <div class="btn btn-block btn-danger"> 
 
        <center>Cancel</center> 
 
       </div> 
 
       </div> 
 

 
       <div class="col-md-5"> 
 
       <div class="btn btn-block btn-success"> 
 
        <center>Submit</center> 
 
       </div> 
 
       </div> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 

 

 
     </div> 
 

 
     <div class="col-md-3"> 
 
     CBA 
 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

他們就不能去全寬導致他們的父母有截圖（五彩列是對我的一個參考點）

一個col-md-6放12，它會工作 我的意思是這裏

<div class="col-md-6"> 
     <div class="row max-size"> 
      <div class="col-md-12"> 

也嘗試着在此處詳細瞭解嵌套鏈接http://getbootstrap.com/2.3.2/scaffolding.html