Question

我在引导程序中有一个网格，如下所示。它适用于大屏幕。但是当涉及到中等屏幕时，它不能很好地堆叠。

   <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 1</p></div>
            <div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 2</p></div>
            <div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 3</p></div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 4</p></div>
            <div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 5</p></div>
            <div class="col-lg-4 col-md-6 col-xs-12 col-sm-12"><p>Box 6</p></div>
        </div>
    </div>
</body>
</html>

我必须维护两个行类，我不能去col-md-4。反正有可能吗？我去col-md-4时遇到的问题是div正在重叠（不是上面的代码，但在实际情况下。）

Answer 1

使用bootstrap网格时，您总是希望col-在一行中最多添加12个。

＆＃13;

 p {
     padding: 50px;
     font-size: 32px;
     font-weight: bold;
     text-align: center;
     background: #f2f2f2;
 }

＆＃13;

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <p>Box 1</p>
            </div>
            <div class="col-lg-4 col-md-6">
                <p>Box 2</p>
            </div>
            <div class="col-lg-4 col-xs-12 col-sm-12">
                <p>Box 3</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-6">
                <p>Box 4</p>
            </div>
            <div class="col-lg-4 col-md-6">
                <p>Box 5</p>
            </div>
            <div class="col-lg-4 col-xs-12 col-sm-12">
                <p>Box 6</p>
            </div>
        </div>
    </div>
</body>

＆＃13;

Check out this Fiddle查看此网格对分辨率更改的响应方式。

希望这有帮助。

编辑：这是指向Bootstrap Grid Templates的链接。它是一个很好的资源，可以一直回到你记住它。

div在网格布局中分布不均

1 个答案: