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（max-width：1200px）{}

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

谢谢！

Answer 1

替换

COL-LG-4

以

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

这基本上支持所有设备（Desktop / ipads / mobile）。

您还可以更改这些div的断点。 lg用于更大的屏幕。
笔记本电脑和小屏幕
md。

sm适用于ipads。

xs适用于移动设备。

Bootstrap是一个12列的网格系统，所以这里4 + 4 + 4 = 12就是逻辑。

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


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

Answer 2

使用此代码。这工作正常：

＆＃13;

<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 -->

＆＃13;

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

Breakpoints and the Bootstrap Grid

Answer 4

对于col-lg-x，断点为1200px，col-md-x为992px，col-sm-x为768px，如果使用col-xs-x，则列永远不会崩溃。您可以使用col-md-代替col-lg-，如果992px不正常，则可以将css中的断点从992px编辑为900px。

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

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

4 个答案: