如何实现具有所需项目定位的 Bootstrap 垂直网格布局答案

【问题标题】：How to achieve Bootstrap vertical Grid Layout with desired item positioning如何实现具有所需项目定位的 Bootstrap 垂直网格布局
【发布时间】：2019-07-26 19:26:18
【问题描述】：

我一直在寻找一种让引导列垂直显示的方法。

我不想使用 masonry 或任何其他库。我希望卡 2 出现在中小屏幕上的卡 1 下方。我的代码是什么样子的：

<div class="container">
        <div class="row no-gutters">
            <div class="col-lg-6">
                <!-- Card 1 -->
                <div class="card" style="height: 500px">
                    <div class="card-header">Card 1</div>
                    <div class="card-body">
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <!-- Card 2 -->
                <div class="card" style="height: 430px">
                    <div class="card-header">Card 2</div>
                    <div class="card-body">
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <!-- Card 3 -->
                <div class="card" style="height: 400px">
                    <div class="card-header">Card 3</div>
                    <div class="card-body">
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <!-- Card 4 -->
                <div class="card" style="height: 550px">
                    <div class="card-header">Card 4</div>
                    <div class="card-body">
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <!-- Card 5 -->
                <div class="card" style="height: 450px">
                    <div class="card-header">Card 5</div>
                    <div class="card-body">
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <!-- Card 6 -->
                <div class="card" style="height: 880px">
                    <div class="card-header">Card 6</div>
                    <div class="card-body">
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <!-- Card 7 -->
                <div class="card" style="height: 420px">
                    <div class="card-header">Card 7</div>
                    <div class="card-body">
                        <p class="card-text">Text for this card.</p>
                    </div>
                </div>
            </div>
        </div>

我的内容如何显示：

我不希望卡片之间有空格（顶部或底部）。

我尝试使用 2 col-6 并添加项目，它们通常按列显示：

      <div class="container">
        <div class="row no-gutters">
            <div class="col-lg-6">
                <!-- Card 1 -->

                <!-- Card 2 -->

                <!-- Card 3 -->

                <!-- Card 4 -->

            </div>
            <div class="col-lg-6">
                <!-- Card 5 -->

                <!-- Card 6 -->

                <!-- Card 7 -->

            </div>
        </div>
    </div>

我希望上述标记中的card 5 在中小屏幕上出现在card 1 之后。

注意：我花了一整天的时间在谷歌上寻找解决方案，以一种简单直接的方式做到这一点，而无需使用砖石等。

【问题讨论】：

如果提供第一个MarkUp，我可以使用flex-order bt 更改每个elemnet 的顺序，但每个项目之间的空格仍然很麻烦。任何帮助将不胜感激
你使用height有什么具体原因吗？？？
@nazifarashid。它只是在这里演示。如果内容或图像具有该特定大小。其他内容应自动调整

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.row_ {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  padding: 0 4px;
}

.column_ {
  -ms-flex: 33.3%; 
  flex: 33.3%;
  /* width: 33.3%; */
}

.column_ img {
  vertical-align: middle;
}

@media (max-width: 767px) {
.column_ {
  -ms-flex: 50% !important; 
  flex: 50% !important;
  width: 50% !important; 
}
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container-fluid">

    <div class="row_"> 
      <div class="column_">
        <div class="card" style="height: 880px">
          <div class="card-header">Card 6</div>
          <div class="card-body">
            <p class="card-text">Text for this card.</p>
          </div>
        </div>
        <div class="card" style="height: 450px">
          <div class="card-header">Card 5</div>
          <div class="card-body">
            <p class="card-text">Text for this card.</p>
          </div>
        </div>
      </div>
      <div class="column_">
        <div class="card" style="height: 450px">
          <div class="card-header">Card 5</div>
          <div class="card-body">
            <p class="card-text">Text for this card.</p>
          </div>
        </div>
        <div class="card" style="height: 450px">
          <div class="card-header">Card 5</div>
          <div class="card-body">
            <p class="card-text">Text for this card.</p>
          </div>
        </div>
      </div> 
      <div class="column_">
        <div class="card" style="height: 550px">
          <div class="card-header">Card 4</div>
          <div class="card-body">
            <p class="card-text">Text for this card.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
</body>
</html>

试试这个！希望它能帮助您获得所需的布局..

我还包括媒体查询，以防您需要在小型设备上破卡。

【讨论】：

太酷了。但每个人的高度不同。我在我的问题中提到“我不希望卡片之间有空格”垂直放置。在您的解决方案中，您的卡片大小相同，这就是它们正确排列的原因
@ArslanAmeer 如果对您有帮助，请立即查看 :)
谢谢。需要稍作调整才能让我工作。再次谢谢你。您已添加砌体 src 链接。我认为这里不需要？
是的，您可以进行相应的调整。如果它有帮助并且技术足够，请批准，这样其他人可能会得到一些帮助......

【解决方案2】：

这可能看起来很奇怪，但请尝试一下。

<div class='row no-gutters'>
  <div class='col-lg-6'>
    <div class='row'>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
    </div>
  </div>
<div class='col-lg-6'>
    <div class='row'>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
      <div class='col-lg-12'>
        <!-- Card -->
      </div>
    </div>
  </div>
</div>

类似这样的 ^ 只需确保在需要的位置添加其他适当的类，例如 col-sm-12，以便此部分可以响应移动设备。希望这会有所帮助！

顺便说一下，这里有一个 Codepen 的链接，其中演示了代码。

https://codepen.io/anon/pen/qGxJRX?editors=1010

【讨论】：

谢谢@AngelGarcia。但这正是我在上面第二个标记中显示的内容。在这种情况下，如果我希望第二列的第一张卡片以响应模式（移动设备 - 中到小屏幕）出现在第一列的第一张卡片下方怎么办？？
哦，我明白你的意思了。给我一些时间弄清楚。