引導網格系統工作不正常的模式

我有一個簡單的模式，我要用來顯示內容如下圖所示：引導網格系統工作不正常的模式

<div id="tacModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg"> 

     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">title</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="container col-md-12" > 
        <div class="row"> 
         <div class="col-md-2"> 
          <img src="path/to/image" > 
         </div> 
         <div class="col-lg-10"> 
          &nbsp; 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-md-12"> 
          &nbsp; 
         </div> 
        </div> 
        </div> 
       </div> 



      <div class="modal-footer"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
      </div> 
     </div>  
    </div> 
    </div>

我所面臨的問題是，內容被放置在當屏幕尺寸達到一定的閾值時。

在手機甚至平板電腦大小的屏幕上，所有內容都正確放置在模態主體中。但在我的桌面屏幕上，內容放置在頁腳內。

這是爲什麼，我該如何解決？

來源

2016-08-10 Albertus Brand Venter

從'.container'中刪除'.col-md-12'類。不要將'.container'與Bootstrap的網格'col- *'類混合使用，它會給你帶來奇怪的問題。 –

@MuhammadUsman這似乎已修復它。你可以把它作爲一個答案，併爲你標記。謝謝，不知道爲什麼它造成了這個問題 –

從.container刪除.col-md-12類。將.container與Bootstrap的網格類（.col-*-*）混合使用是個壞主意。

爲什麼會造成問題？

如果你看一下引導的CSS，你會發現：

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

@media (min-width: 992px) { 
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { 
     float: left; 
    } 
}

.container的樣式保持在頁面的中心。但是在992px及以上的屏幕上，您的.container浮動到左側並創建佈局問題。如果可能，正在導致.container.container右邊的空格，並且您看到奇怪的行爲。

來源

2016-08-10 08:45:18

引導網格系統工作不正常的模式

回答

相關問題