如何停止列内容进入错误的列在bootstrap？

Question

嗨，我正在做一些工作在bootstrap，我试图有一个列在左边，这将提供一些信息和另一个集合的列在右边，将包含图像。

到目前为止，我已经尝试了以下代码。

<div class="container-fluid">
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    hello
                </div>
                <div class="col-md-2">
                    hello
                </div>
                <div class="col-md-2">
                    hello
                </div>
                <div class="col-md-2">
                    hello
                </div>
                <div class="col-md-2">
                    hello
                </div>
            </div>
        </div>

但是当我添加第五个 col-md-2 它把它推到下面 col-md-4 而我想让它留在第一页的下面。col-md-2.

请看下面我想要什么

请在此输入图片描述

我怎样才能做到这一点？

Answer 1

为了实现你的目标，你必须需要改变你的代码，像下面。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
        <div class="col-md-2">
          hello
        </div>
      </div>
    </div>
  </div>
</div>