如何在1200px断点处停止自举面板的全宽？

Question

我创建了三个面板，它们在一个流体容器内水平放置，每个面板都有col-lg-4类，但是，当我将浏览器大小减小到1200px以下时，它们会叠加在一起并扩展到完整的浏览器宽度。 我希望面板在900px断点处扩展到全宽，而不是1200px。

以下是网页中面板大小超过1200px浏览器宽度的示例：

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

以下是网页面板在1200px浏览器宽度下面的示例：

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（最大宽度：1200px）{}

但我不完全确定要实施什么。

谢谢！

Answer 1

更换

COL-LG-4

至

col-lg-4 col-md-4 col-sm-4 col-xs-4

这基本上支持所有设备（桌面/ ipads /移动）。

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

笔记本电脑和小屏幕的MD。

sm适用于ipads。

xs适用于移动设备。

Bootstrap是一个12列网格系统，因此这里4 + 4 + 4 = 12构成逻辑。

在你的情况下，你只使用col-lg-4类，它只为大型桌面屏幕编写，在1200px之后，css无效。

如果你想最小化这些东西，你也可以使用col-sm-4。

Answer 2

使用此代码。 这是正常的：

 <div class="container-fluid trse-feature"> <div class="row"> <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> <!-- end col-lg-4 --> <div class="col-md-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-md-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 --> 

Answer 3

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

<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将堆叠在768px
• col-md-4将堆叠在992px
• col-lg-4将堆叠在1200px

断点和Bootstrap网格

Answer 4

对于col-lg-x ，断点为1200px， col-md-x为992px， col-sm-x为768px，如果使用col-xs-x ，则列永远不会崩溃。 您可以使用col-md-而不是col-lg-并在992px到900px的情况下编辑css中的断点（如果992px不正常）。

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