引导程序堆栈列错误

Question

我在使用引导程序正确堆叠列时遇到了麻烦-从图像中可以看出，我需要将黑匣子放置在绿匣子下面，但我无法使用它：

这是我正在使用的代码：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div> 
        <div class="col-lg-6 col-md-12 " style="background-color:green; height:300px;"></div>
        <div class="col-lg-6 col-md-12" style="background-color:black; height:300px;"></div>
    </div>
</div>

有人可以告诉我我在哪里错吗？

谢谢

Answer 1

您有2列，然后将第一个div放到1列中，然后将第二个div放到2列中，而下一个div将在1列内重新获得，将黑色div放到绿色下方的简单方法是创建另一个空白div

    <div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div> 
        <div class="col-lg-6 col-md-12 " style="background-color:green; height:300px;"></div>
        <div class="col-lg-6 col-md-12" style="height:300px;"></div>
        <div class="col-lg-6 col-md-12" style="background-color:black; height:300px;"></div>
    </div>
</div>

Answer 2

Bootstrap 4首先移动。因此，第一件事就是颠倒您的课程顺序。

问题是您将框的宽度设置为台式机上行的宽度的一半，并且默认情况下，行设置为在引导程序中自动换行。

使用col-12将列设置为全宽。

<div class="container-fluid">
    <div class="row">
        <div class="col-12" style="background-color:blue; height:600px;"></div> 
        <div class="col-12 " style="background-color:green; height:300px;"></div>
        <div class="col-12" style="background-color:black; height:300px;"></div>
    </div>
</div>

编辑：

如果您希望列的宽度为行的一半，并且仍然阻止换行，则必须添加一个偏移量：

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-lg-6 offset-lg-3" style="background-color:blue; height:600px;"></div> 
        <div class="col-12 col-lg-6 offset-lg-3" style="background-color:green; height:300px;"></div>
        <div class="col-12 col-lg-6 offset-lg-3" style="background-color:black; height:300px;"></div>
    </div>
</div>

Answer 3

Bootstrap 4使用Flexbox，因此各列不会像在Bootstrap 3中那样彼此“浮动”。您可以通过在<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id='root'></div>和屏幕宽度上启用浮动来覆盖此行为。

注意使用import requests from bs4 import BeautifulSoup as bs4 keywords = ["KI", "AI", "Big Data", "Data", "data", "big data", "Analytics", "analytics", "digitalisierung", "ML", "Machine Learning", "Baumeisterarbeiten"] url = "https://www.auftrag.at//tenders.aspx" data = requests.get(url, timeout=5) soup = bs4(data.text, 'html.parser') jobs = soup.find_all('p') for keyword in keywords: for job in jobs: if keyword in str(job): print(job) 和lg类。

d-lg-block

https://www.codeply.com/go/7KLlzbAGGU

---

另请参阅：One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4

Answer 4

您可以将蓝色和绿色列嵌套在另一列中。

<div class="container-fluid">
  <div class="row">
      <div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div> 
    <div class="col-lg-6 col-md-12 ">
      <div style="background-color:green; height:300px;"></div>
      <div style="background-color:black; height:300px;"></div>
    </div>
</div>

这样，绿色和黑色列包含在“右侧”内部。其他答案也起作用，但是它们正在更改引导网格行为或拆分内容，我认为这不是理想的选择。