Bootstrap 网格 - 在 div 中的文本和图像之间出现问题 spacing/padding

Question

我正在尝试创建一个包含一些数据结果的简单 bootstrap 网格。第一个header（web-based审查）和报告文本（例如，211 -> 新行“确定的项目总数”）的间距太大。看起来有点尴尬。基本上，我想消除额外的行 break/spaces。“采访”和下图之间的间距很好，但是当我尝试使用“Web-based 评论”使它看起来相似时，一切都变得糟糕了。

为了澄清，我附上了一张图片来展示我想要的内容。

最重要的是，我想修复 (1)“Web-based 评论”header 与其下方图片之间的间距，以及 (2) 大文本中的数字与下方文本.

期望输出：https://i.stack.imgur.com/CGyqo.jpg
这是代码笔：https://codepen.io/tenebris_silentio/pen/YzqRQOv

var ultimateColors = [
        ['rgb(0, 25, 51)', 'rgb(0, 76, 153)']
      ];

      var data = [{
        values: [50, 50],
        labels: ['<b>Coded</b>', '<b>Uncoded</b>'],
        text: ["<b> Description</b>: Projects that have been coded", '<b>Description</b>: Projects that have not yet been coded'],
        textinfo: 'percent',
        domain: {column: 0},
        name: 'Sources',
        marker: {
          colors: ultimateColors[0]
        },
        hoverinfo: 'label+percent+desc+text',


        type: 'pie'
      }];

      var layout = {
        title: '',
        annotations: [
          {
            font: {
              size: 17
            },
            showarrow: false,
            text: '',
            x: 0.5,
            y: 0.5
          },


        ],
        height: 380,
        width: 550,
        showlegend: false,
        grid: {rows: 1, columns: 1}
      };

      Plotly.newPlot('myDiv', data, layout);

body {font-family: "Lato", sans-serif}
.mySlides {display: none}

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

<body>

  <div class="row">
    <div class="col-sm-5">
      <h3>Web-based Review</h3> <img src="https://i.ibb.co/4JRWPNX/reviewpic.jpg" width="275" height="275"  align="left">
       <br><br>  <p class="w3-justify"><p style="font-size:30px">211</p>total projects identified

    </div>
    <div class="col-sm-7">
      <div id='myDiv'> </div>
    </div>

    <div class="col-sm-5">
      <h3>Interviews</h3> <img src="https://i.ibb.co/Cbvz20q/interviewpic.jpg" width="275" height="275"  align="left">
       <br><br>  <p class="w3-justify"><p style="font-size:30px">9</p>interviews completed<br><br><p style="font-size:30px">46</p> operational interviews identified

    </div>

      10 of 20 projects have been coded.
  </div>
</body>

Answer 1

对于您的标题，它与您的图像不接近的原因是计算机上方有很多白色 space。你应该调整图像的大小，减少白色 space，但如果你不能，你可以使用 transform: translateY() 来获得类似的效果。

对于数字，p 标记带有来自大多数浏览器基本样式和 bootstrap 的重新启动 css 的边距。您可以调整结构并使用 span 与类和换行符以使其更好。代码包括：

var ultimateColors = [
  ['rgb(0, 25, 51)', 'rgb(0, 76, 153)']
];

var data = [{
  values: [50, 50],
  labels: ['<b>Coded</b>', '<b>Uncoded</b>'],
  text: ["<b> Description</b>: Projects that have been coded", '<b>Description</b>: Projects that have not yet been coded'],
  textinfo: 'percent',
  domain: {
    column: 0
  },
  name: 'Sources',
  marker: {
    colors: ultimateColors[0]
  },
  hoverinfo: 'label+percent+desc+text',


  type: 'pie'
}];

var layout = {
  title: '',
  annotations: [{
      font: {
        size: 17
      },
      showarrow: false,
      text: '',
      x: 0.5,
      y: 0.5
    },


  ],
  height: 380,
  width: 550,
  showlegend: false,
  grid: {
    rows: 1,
    columns: 1
  }
};

Plotly.newPlot('myDiv', data, layout);

body {
  font-family: "Lato", sans-serif
}

.mySlides {
  display: none
}

span.projectNumber {
  font-size: 30px
}


/* I recommend instead of using below code to resize image with less white space */
h3.wbrHeader {
  transform: translateY(50px);
}

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

<body>

  <div class="row">
    <div class="col-sm-5">
      <h3 class="wbrHeader">Web-based Review</h3> <img src="https://i.ibb.co/4JRWPNX/reviewpic.jpg" width="275" height="275" align="left">
      <br><br>
      <p class="w3-justify">
        <p><span class="projectNumber">211</span><br>total projects identified</p>
    </div>
    <div class="col-sm-7">
      <div id='myDiv'> </div>
    </div>

    <div class="col-sm-5">
      <h3>Interviews</h3> <img src="https://i.ibb.co/Cbvz20q/interviewpic.jpg" width="275" height="275" align="left">
      <br><br>
      <p class="w3-justify">
        <p><span class="projectNumber">9</span><br>interviews completed</p><br><br>
        <p><span class="projectNumber">46</span><br>operational interviews identified</p>
    </div>

    10 of 20 projects have been coded.
  </div>
</body>

Bootstrap 网格 - 在 div 中的文本和图像之间出现问题 spacing/padding

Bootstrap Grid - issue getting desired spacing/padding between text and images within divs

html

css

grid-layout

flexbox

bootstrap-4