我正在尝试创建一个带有一些数据结果的简单引导网格。第一个标题(基于网络的审查(和报告的文本(例如，211->新行"确定的项目总数(之间的间隔太大。这看起来有点尴尬。基本上，我想消除多余的换行符/空格。"；访谈"；并且下面的图像是好的，然而当我试着玩"；基于Web的评论"；为了让它看起来相似，一切都见鬼去了。
为了澄清，我附上了一张图片来展示我想要的东西。
底线是，我想固定(1(；基于Web的评论"；页眉及其下方的图像，以及(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>对于标题，它不靠近图像的原因是计算机上方有很多空白。您应该用较少的空白调整图像大小，但如果不能，您可以使用transform: translateY()来获得类似的效果。
对于数字，p标记带有大多数浏览器基本样式和引导程序重新启动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>