无法让两个容器彼此相邻 [BOOTSTRAP GRID-LAYOUT]答案

【问题标题】：Can't make two containers stay next to each other [BOOTSTRAP GRID-LAYOUT]无法让两个容器彼此相邻 [BOOTSTRAP GRID-LAYOUT]
【发布时间】：2020-07-28 16:29:07
【问题描述】：

我正在尝试重新创建此布局，但我不知道如何使第二个容器保持在第一个容器旁边。我尝试为 div 和容器添加高度和宽度，但它仍位于红色块下方。我也尝试将对齐设置为 in-block，但它也不起作用。

https://codepen.io/jimdiew/pen/XWXwEOa

 <style>
      .sin-padding {padding-left: 0; padding-right: 0;}
      .col-3 { width: 100%; height: 100%;}
      .box-1 {height: 200px;}
      .col-6{flex:50%; max-width:50%;}
      .row {display: flex; flex-wrap: wrap;}
  </style>
</head>
<body>
    
<!-- FIRST CONTAINER -->     
        <div class="col-6 sin-padding">
        
        <div class="box-1" style="background-color: red;">
        Big Project
        </div>
    </div>
    
<!-- SECOND CONTAINER -->
    <div class="col-6 sin-padding">

<!-- FIRST ROW-->
        <div class="row">
            <div class="col-6" style="background-color: blue;">
            Project 1
            </div>
    
            <div class="col-6" style="background-color: green;">
            Project 2
            </div>
        </div>

<!-- SECOND ROW-->        
        <div class="row">    
            <div class="col-6" style="background-color: purple;">
            Project 3
            </div>
            
            <div class="col-6" style="background-color: cyan;">
            Project 5
            </div>
        </div>            
       
    </div>

EDIT 1 : 我将第二个容器的 col-3 更改为 col-6，因为我认为它更合适。

【问题讨论】：

标签： grid-layout bootstrap-grid

【解决方案1】：

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

<style>
  .sin-padding {
    padding-left: 0;
    padding-right: 0;
  }

  .col-3 {
    width: 100%;
    height: 100%;
  }

  .box-1 {
    height: 200px;
  }
  .box-2 {
    height: 100px;
  }

  .col-6 {
    flex: 50%;
    max-width: 50%;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
  }
</style>
</head>

<body>

  <div class="row">
    <!-- FIRST CONTAINER -->
    <div class="col-6 sin-padding">
      <div class="box-1" style="background-color: red;">
        Big Project
      </div>
    </div>
    <!-- SECOND CONTAINER -->
    <div class="col-6 sin-padding">
      <!-- FIRST ROW-->
      <div class="row">
        <div class="col-6 box-2" style="background-color: blue;">
          Project 1
        </div>

        <div class="col-6 box-2" style="background-color: green;">
          Project 2
        </div>
      </div>
      <!-- SECOND ROW-->
      <div class="row">
        <div class="col-6 box-2" style="background-color: purple;">
          Project 3
        </div>

        <div class="col-6 box-2" style="background-color: cyan;">
          Project 5
        </div>
      </div>
    </div>
  </div>

  </div>

你错过了将第一个盒子和第二组盒子放在一个 row 类中。

更新： 我注意到代码缺少结束 body 标记和起始 head 标记

【讨论】：

非常感谢！我有另一个问题。当我运行代码时，我看到水平滚动激活并且第一个容器的一部分被切掉了。我在说什么的照片 (ibb.co/HNrHRk2)
@Jimdiew 您是否在答案中运行了上面的确切代码？
@Jimdiew 请尝试更新的 sn-p。它工作正常并且反应灵敏。确保您的 CSS 没有被任何其他 CSS 覆盖
哦，你是对的！我已经改变了，但问题仍然存在：/ 除了内联和内部的唯一 css 是 bootstrap.min.css ，但我不认为这是问题..