Question

使用LG WebOS Emulator，我尝试查看我的网页。但似乎 Bootstrap无法处理非常大的屏幕（如屏幕截图所示，左侧和右侧有2个白色屏幕区域）。模拟器的分辨率 1920x907

屏幕截图：

HTML：

<div style="background-color:green" class="container">
    <div  class="row">
        <div class="col-lg-1">1</div>
        <div class="col-lg-1">2</div>
        <div class="col-lg-1">3</div>
        <div class="col-lg-1">4</div>
        <div class="col-lg-1">5</div>
        <div class="col-lg-1">6</div>
        <div class="col-lg-1">7</div>
        <div class="col-lg-1">8</div>
        <div class="col-lg-1">9</div>
        <div class="col-lg-1">10</div>
        <div class="col-lg-1">11</div>
        <div class="col-lg-1">12</div>                  
    </div>
    <div class="row"> <div align="center"><b>test</b></div> </div>
    <div class="row"> <div align="center"><b>test</b></div> </div>
    <div class="row"> <div align="center"><b>test</b></div> </div>
    <div class="row"> <div align="center"><b>test</b></div> </div>
    <div class="row"> <div align="center"><b>test</b></div> </div>
    <div class="row"> <div align="center"><b>test</b></div> </div>
    <div class="row"> <div align="center"><b>test</b></div> </div>
    <div class="row"> <div align="center"><b>test</b></div> </div>
    <div class="row"> <div align="center"><b>test</b></div> </div>
    <div class="row"> <div align="center"><b>test</b></div> </div>
    <div class="row"> <div align="center"><b>test</b></div> </div>              
    <div class="row">
        <div class="col-lg-12"><div id="dimensions" align="center"></div></div>
    </div>
</div>

这是Boostrap的 GRID限制吗？如果没有，如何解决这个问题？谢谢你......

Answer 1

将您的.container更改为.container-fluid

在bootstrap.css中，最大宽度设置了限制

@media (min-width: 1200px) {
 .container {
   width: 1170px;
 }
}

Answer 2

大屏幕的

Bootstrap 属性限制为 1170 px ，因此您需要自己操作代码或者下载Bootstrap XL grid 这里的 CSS 文件中的类;

Bootstrap XL

Answer 3

大型显示器的Bootstrap默认为1170px： http://getbootstrap.com/css/#grid-options

但是，您可以在此处进行自定义构建以定义自己的默认行为： http://getbootstrap.com/customize/#container-sizes

Answer 4

而不是使用

<div ... class="container">

试

<div ... class="container-fluid">

我不确定您使用的是Bootstrap的哪个版本，但在3.1（我相信）您可以访问此类。作为一种更自定义的替代方案，您可以创建自己的css类，如此，

.container-full {
  margin: 0 auto;
  width: 100%;
}

会给你相同的结果。

Boostrap无法处理非常大的屏幕分辨率

4 个答案: