引导网格系统工作不正常的模式

我有一个简单的模式，我要用来显示内容如下图所示：引导网格系统工作不正常的模式

<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

引导网格系统工作不正常的模式

回答

相关问题