Bootstrap Cards，连续显示2个

Question

通过使用：

，当我在彼此之下有一些牌时，它就是这样的

<div class="row">
    <div class="col-md-6">
        stuff
    </div>
    <div class="col-md-6">stuff</div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

我错过了什么，以便让他们看起来不那么奇怪，但适应？ 我希望它像这样对齐：

Answer 1

我建议以下内容：

.cards-container {
  column-count: 2;
}

.cards-container div {
   background: floralwhite;
   height: 50px;
   margin: 10px 0;

   // to avoid column breaks
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
   break-inside: avoid;
}

.cards-container div:first-child {
    margin: 0;
}

<div class="cards-container">
<div class="col-md-6">
    stuff
</div>
<div class="col-md-6">stuff</div>
<div class="col-md-6">stuff</div>
<div class="col-md-6">stuff</div>
</div>

Answer 2

请检查此fiddle

HTML结构：

<div class="container">
<div class="row">
    <div class="col-xs-6 col">
        stuff
    </div>
    <div class="col-xs-6 col col1">stuff</div>
    <div class="col-xs-6 col col1">stuff</div>
    <div class="col-xs-6">stuff</div>
</div>

PS：您可以将'xs'替换为'md'用于桌面。