css - div在网格布局中分布不均-6ren

css - div在网格布局中分布不均

转载作者：行者123 更新时间：2023-11-28 08:14:26

我在 bootstrap 中有一个网格，如下所示。它适用于大屏幕。但是当涉及到中等屏幕时，它并没有很好地堆叠起来。

   <!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 重叠(不是上面的代码，但在实际情况下。)

最佳答案

当使用 Bootstrap 网格时，您总是希望 col- 在一行中加起来最多为 12。

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

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