Правильное выравнивание в строке

Question

Ладно, так ... У меня была эта проблема в течение долгого времени, похоже, что теперь я решил обратиться и посмотреть, есть ли кто-то еще более опытный с начальной загрузкой, чем я.

Итак, у меня есть эти 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 в основном.

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>

Проверьте код @ Codepen