Question

我无法修复我的CSS：我正在使用bootstrap 4，我有一行带有两个col，里面有两个图表它看起来如下：

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

这是我的代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用Bootstrap Card来解决此问题：

＆＃13;

/** 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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Example Canvas Center Div</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<style>
  .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 {
    border: 1px solid rgba(102, 187, 158, 0.3);
    border-radius: 15px;
    background-color: rgba(102, 187, 158, 0.05);
    width: 100%;
    padding: 0;
    padding-bottom: 10px;
}

  .classWithPad h2 {
    text-align: center;
    background-color: #292B2C;
    color: white;
    border-radius: 15px 15px 0 0;
  }

  canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
</style>

<body>

  <div class="container radar-container">
    <div class="row">
      <div class="col graph-info">
        <div class="col classWithPad">
          <h2>title</h2>
          
            <canvas id="info_process" width="200" height="200" style="border:1px solid #000000;">
              Your Canvas
              </canvas>
          
        </div>
      </div>
      <div class="col action-info">
        <div class="col classWithPad">
          <h2>title</h2>
       
            <canvas id="info_process2" width="200" height="200" style="border:1px solid #000000;">
              Your Canvas
            </canvas>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

＆＃13;

两列填充和标题

2 个答案: