如何在Bootstrap 4中垂直堆叠内容

Question

我想要实现的是，每当我将屏幕缩小到移动尺寸时，两个col6的屏幕就会垂直堆叠在一起，而不是水平放置。这是一件简单的事情，但我尝试了很多不同的东西，但由于某种原因，我似乎就是做不到。

它应该看起来像这样，在移动设备中，按钮位于内容的下方：

示例

​

​

如果你能帮助我，我将不胜感激！

<div class="container">
  <div class="row">
    <div class="col-6">
      <h2 class="my-5">Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus ex, vehicula hendrerit neque vitae, consequat tristique enim. Fusce vel odio sed mi commodo dapibus. Aenean porttitor vestibulum purus, id feugiat dolor dictum a. Morbi non ipsum gravida, gravida sapien eu, tristique orci. Nullam rhoncus ornare varius. Mauris eget hendrerit nulla. Vivamus tempor hendrerit justo sed faucibus.</p>
    </div>


    <div class="col-6">
      <div class="row">
        <div class="col-12">
          <a class="btn btn-lg btn-outline-danger mt-5 mb-2 ml-5">Lorem Ipsum</a>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
        </div>
      </div>
  </div>

Answer 1

这在垂直方向上堆叠很好。它可能不适用于您，因为您放置了一个</div>来关闭container <div>。

​

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-6">
      <h2 class="my-5">Lorem ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus ex, vehicula hendrerit neque vitae, consequat tristique enim. Fusce vel odio sed mi commodo dapibus. Aenean porttitor vestibulum purus, id feugiat dolor dictum a. Morbi non ipsum
        gravida, gravida sapien eu, tristique orci. Nullam rhoncus ornare varius. Mauris eget hendrerit nulla. Vivamus tempor hendrerit justo sed faucibus.</p>
    </div>


    <div id="buttons">
      <div class="col-6">
        <div class="row">
          <div class="col-12">
            <a class="btn btn-lg btn-outline-danger mt-5 mb-2 ml-5">Lorem Ipsum</a>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

​