Question

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

我不想使用砖石建筑或任何其他图书馆。我希望卡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之后。

注意：我整天在Google上度过了一个简单的直接方式而无需使用砖石建筑的解决方案。

Answer 1

这似乎是一个奇怪的设置，但请尝试一下。

<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

Answer 2

* {
  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>

试试看！希望它能帮助您获得所需的布局。

我还提供了媒体查询功能，以防您需要在小型设备上损坏存储卡。

如何通过所需的项目定位实现Bootstrap垂直网格布局

2 个答案: