引导卡溢出在行上并影响其他元素的边距

Question

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

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

这是该项目的链接：https：//codepen.io/jreecebowman/pen/nyokpv

在主纳维尔(Main Navbar(下方，其中有一个.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列上传播的div col-md-4与在8列上的div分开， col-md-8