Bootstrap Grid-在divs中获取文本和图像之间所需的间距/填充的问题

编程问答 2022-06-12

问题描述

我正在尝试使用一些数据结果创建一个简单的引导网格。第一个标头（基于Web的审阅）和报告的文本（例如211->新行“已识别的总项目”）之间的间距太大。看起来有些尴尬。基本上，我想消除多余的换行符/空格。 “访谈”和下面的图片之间的间距很好，但是当我尝试使用“基于Web的评论”使其看起来相似时，一切都陷入了困境。

为澄清起见，我附加了一张图片以显示我想要的内容。

最底线，我想修复（1）“基于Web的审阅”标题和它下面的图像之间的间距，以及（2）大文本中的数字和下面的文本。

所需的输出：https://i.stack.imgur.com/CGyqo.jpg
这是codepen：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>

bootstrap-4flexboxgrid-layouthtml