Question

如何在bootstrap4上进行布局，然后我不能。预先谢谢你！

<div class="col-8">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>

现在像这样

并且需要看起来像这样

Answer 1

在列上使用float: left;样式将为您带来这种效果。

下面，由于我没有<img>，我将<div>标签更改为带有边框的img.jpg，以提供相同的视觉效果。如果将它们交换回来，它仍然可以正常工作。

我通过添加以下内容将样式添加到col类中：

.col-4, .col-8{
    float:left;
}

尽管如此，我还是建议使用这种样式向外部div添加一个类，而不是在bootstrap的类上使用小猪支持。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
          integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<style>
    .small-card {
        height: 60px;
        width: 100%;
        border: solid 2px #333;
    }

    .large-card{
        height: 120px;
        width: 100%;
        border: solid 2px #333;
    }

    .col-4, .col-8{
        float:left;
    }
</style>
<div class="col-8">
    <a href="#">
        <div class="card">
            <div class="large-card"></div>
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <div class="small-card"></div>
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <div class="small-card"></div>
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <div class="small-card"></div>
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <div class="small-card"></div>
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <div class="small-card"></div>
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <div class="small-card"></div>
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <div class="small-card"></div>
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <div class="small-card"></div>
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <div class="small-card"></div>
        </div>
    </a>
</div>
</body>
</html>

Bootstrap 4格

1 个答案: