Question

NB我是编程的新手，这是我的第一篇文章，所以请原谅任何误导性的代码或混淆术语等。

我在博客模板上玩自举卡，我试图将两行分开，以便第一行中元素的高度不会影响第二行中元素的位置。 / p>

以下是该项目的链接：https://codepen.io/jreecebowman/pen/NyOKpV

在主导航栏下方，有一个.row，其中有两张卡片，分为两列：col-md-8＆amp; col-md-4。

此下面的.row受上面的.row影响，即任一行上两张col-md-8张卡之间的边距。如果将其与下面的行进行比较，则没有余量;卡片堆叠在一起。这就是我想要的第一行，无论右边小卡的高度如何。

我可以将卡片放在左侧.card-columns，但这并不能解决我的问题，因为我只能使用css中的@media查询将其设置为屏幕宽度的一半。

我希望这很清楚。有人可以帮我解决这个问题吗？

提前致谢！

Answer 1

您必须将左侧卡片放在1列col-md-8 ...

中

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-block">
                    <h4 class="card-title">Card title</h4>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card">
                <div class="card-block">
                    <h4 class="card-title">Card title</h4>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <div class="card">
                <div class="card-block">
                    <h4 class="card-title">Card title</h4>
                    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                </div>
            </div>
        </div>
        <div class="wotw col-md-4">
            <div class="card">
                <img class="card-img-top" src="..." alt="Card image cap">
                <div class="card-block">
                    <h4 class="card-title">Card title</h4>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>

    </div>
</div>

https://www.codeply.com/go/7CH0uHS9IT

第一行中有间距/边距的原因是因为使用了flexbox（Bootstrap 4），这使得一行中的所有列都具有相同的高度。由于col-md-4内的右卡更高，所以整行更高。

Answer 2

更改您的标记，以便将分布在4列col-md-4上的div与从8列col-md-8

分开的div分开

自举卡溢出行并影响其他元素的边距

2 个答案: