html - 两列填充和标题

Question

我无法修复我的 CSS:我正在使用 bootstrap 4，我有一行有两个列，里面有两个图表它看起来像下面这样:

我已经添加了一些 padding-left 和 right 以在两个 col 之间创建一个空间但是现在当我添加一个标题时它不会恢复所有的 div我怎样才能让它看起来像一个真正的标题？

这是我的代码:

.graph-info,
.motivation-info {
  padding-left: 0;
  padding-right: 5px;
}

.action-info,
.behaviour-info {
  padding-right: 0;
  padding-left: 5px;
}

.radar-container {
  margin-top: 30px;
}

.classWithPad {
  border: 1px solid rgba(102, 187, 158, 0.3);
  border-radius: 15px;
  background-color: rgba(102, 187, 158, 0.05);
  padding-top: 10px;
  padding-bottom: 10px;
}

.radar-container .row {
  margin-bottom: 15px;
}

.classWithPad h2 {
  text-align: center;
  background-color: #292B2C;
  color: white;
}

<div class="container radar-container">
  <div class="row">
    <div class="col graph-info">
      <div class="col classWithPad">
        <h2>title</h2>
        <canvas id="info_process"></canvas>
      </div>
    </div>
    <div class="col action-info">
      <div class="col classWithPad">
        <h2>title</h2>
        <canvas id="info_process2"></canvas>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用 Bootstrap Card解决这个问题:

/** only to show some content */
#info_process {
  background:url('https://placehold.it/100x100');
  width:100%;
}
#info_process2 {
  background:url('https://placehold.it/100x100');
  width:100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid mt-5">
  <div class="row">
    <div class="col col-6">
      <div class="card">
        <h2 class="card-header text-center bg-dark text-white">title</h2>
        <div class="card-body">
          <canvas id="info_process"></canvas>
        </div>
      </div>
    </div>
    <div class="col col-6">
      <div class="card">
        <h2 class="card-header text-center bg-dark text-white">title</h2>
        <div class="card-body">
          <canvas id="info_process2"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>