在一行中正确对齐 div答案

【问题标题】：Aligning divs correctly within a row在一行中正确对齐 div
【发布时间】：2018-04-30 07:48:35
【问题描述】：

好的，所以...我已经有这个问题很长时间了，现在我决定联系一下，看看是否有其他人比我更有经验。

所以我有这 2 个 div，它们位于另一个 col-12 div 中。这两个 div 都是 col-6，所以我希望它们占据 col-12 中的一半空间。

我无法获得正确的填充/边距。它们要么彼此“卡住”并占用太多空间，要么它们在下方对齐。我几乎什么都试过了:(

这就是我现在得到代码的方式：

这是我拥有的当前代码，没有“内容”。我只是按照它们的基本外观放置了 div。

<div class="container-fluid wm-body trips-page">
<div class="row wm-card trips-row" style="margin: 15px 0 0 0; padding: 0px;">

	<div class="row" style="margin: 0px;">
	</div>

</div>
<div class="row" style="margin-top: 15px;">
	<div class="col-md-6">
		<div class="row">

			<div class="col-md-12">					
			</div>		
		
			<div class="col-md-12 pickup-dropoff">
				<div *ngIf="trip" class="col-md-6 wm-card pickup">
				</div>		
		
				<div *ngIf="trip" class="col-md-6 wm-card dropoff">
				</div>

			</div>
			
		</div>		
	</div>

	<div class="col-md-6">
		<div class="wm-card">
		</div>
	</div>
    
</div>
</div>

但是...这是我想要和期待的结果。

原来如此……我快疯了！有人知道怎么做吗？

编辑：嗯...我尝试将它包装在自己的行中。我尝试以不同的方式嵌套它... 但是现在所有的代码基本上都没有div的内容了。

【问题讨论】：

请提供完整代码以找到可能的解决方案，这段代码很难回答这个问题。请添加更多详细信息以及您迄今为止尝试过的内容
我已经更新了代码 sn-p 并添加了一些我尝试过的选项。
只有 html 是不够的，发布您的 CSS 以了解有关如何放置分区和所有内容的更多详细信息
没有css。就是这样……

标签： twitter-bootstrap

【解决方案1】：

您还应该描述下您正在使用 Bootstrap4。

我写了一个小框架，可以帮助你前进。

body {
  background: lightgray;
}
div {
  border-radius: 5px;
}
div.col>div::after {
  content: 'Lorem Ipsum';
}
.col > div {
  margin: 1px;
  border: 1px solid white;
}

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


<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div></div>
    </div>
  </div>
  <div class="row">
    <div class="col col-md-6">
      <div></div>
    </div>
    <div class="col col-md-6">
      <div></div>
    </div>
    <div class="col col-md-6">
      <div></div>
    </div>
    <div class="col col-md-6">
      <div></div>
    </div>
  </div>
</div>

Check the code @ Codepen

【讨论】：