在一行内正确对齐div

Question

好的，所以......我已经有这个问题很长一段时间感觉就像现在我已经决定伸手去看看是否还有其他人比我更有经验。

所以我有这两个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的内容。

Answer 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