如何阻止引导面板在1200 at断点上完全宽度？

Question

我已经创建了三个面板，它们水平地坐在一个流体容器中，每个面板都有-lg-4类，但是，当我将浏览器的大小缩小到1200 of以下时，它们会相互叠加，并扩展到完整的浏览器宽度。我希望面板扩展到一个大约900 to断点的全宽度，而不是1200 to。

下面是网页中面板在1200px浏览器宽度上的样子的示例：

https://i.stack.imgur.com/MVi6L.png

下面是网页中面板在1200 an浏览器宽度以下的一个示例：

https://i.stack.imgur.com/RAfUB.png

这是我的代码：

<div class="container-fluid trse-feature">
<div class="row"> 
    <div class="col-lg-4">
        <div class="panel panel-default panelL"> 
            <div class="panel-body icon">
                <h2 class="text-center">We also work in conjuction with</h2>
            </div> <!-- end panel-body --> 
        </div> <!-- end panel -->
    </div> <!-- end col-lg-4 --> 

    <div class="col-lg-4">
        <div class="panel panel-default panelM">
            <div class="panel-body">
                <a href="https://www.trsengineering.co.uk/" target="_blank"><img src="trsenone.png" class="img-responsive"></a>

            </div> <!-- end panel body -->
        </div> <!-- end panel --> 
    </div> <!-- end col-lg-4 -->



<div class="col-lg-4">
    <div class="panel panel-default panelR">
        <div class="panel-body">
            <p class="text-center trse-p"> TRSE is a certified Notification Body (NoBo) and all TMD maintenance proposals are business cased to demonstrate the benefits from an optimised, improved and Engineering Accepted maintenance regime. </span></p>
        </div> <!-- end panel-body --> 
    </div> <!-- end panel -->
</div> <!-- end col-lg-4 --> 

我认为这与修改引导断点有关，如下所示：

@media (最大宽度:1200 max) {}

但我不完全确定该实现什么。

谢谢!

Answer 1

取代

科尔-lg-4

到

col-lg-4 sm-4 4

这基本上是对所有设备(桌面/ipads/移动设备)的支持。

您还可以更改这些div的断点。lg用于更大的屏幕。。

用于笔记本电脑和小屏幕的md .

sm是用于ipads的。。

xs是用于移动的.

引导程序是一个12列网格系统，因此这里的4+4+4 = 12构成了逻辑。

在您的情况下，您只使用col-lg-4类，它只为大型桌面屏幕编写，在1200 In之后，css就不能工作了。

如果你只想把事情最小化，你也可以使用-sm-4。

Answer 2

只需使用md断点，而不是在992 at处堆叠。

<div class="col-md-4">
        <div class="panel panel-default panelL"> 
            <div class="panel-body icon">
                <h2 class="text-center">We also work in conjuction with</h2>
            </div> <!-- end panel-body --> 
        </div> <!-- end panel -->
    </div>

演示：http://www.codeply.com/go/KeLX4nQ1vs

• col-xs-4不会垂直堆叠
• col-sm-4将在768 at上堆叠
• col-md-4将在992 at上堆叠
• col-lg-4将在1200 at上堆叠

断点和引导网格

Answer 3

对于col-lg-x，断点为1200 if，col-md-x为992 if，col-sm-x为768 if，如果使用col-xs-x，列永远不会折叠。您可以使用col-md-而不是col-lg-，并编辑css中的断点从992 ok到900 ok(如果992px不合适)。

也可以为此定义自己的媒体查询和自己的类。