实际上，我正在尝试获得图像中显示的输出to_be_accuited，但无法在标记中找到正确的编辑。
到目前为止，我已经尝试创建了大部分的网页，并实现了这个present_position，因此您可以看到面板标题和面板对齐方式与上一张图片中的不同。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<!-- CREATE THE REPORT LAYOUT ACCORDING TO GIVEN SPECIFICATIONS -->
<!-- HINT :- Use PANEL,bootstrap alerts, List and UL concepts -->
<div class="container">
<h2>Automatic tasks report</h2>
<div class="panel panel-default">
<div class="panel-heading">Execution summary of tasks<span class="caret"></span></div>
<h2>Execution Log Information</h2>
<div class="panel-body">
<ul class="list group">
<li class="list-group-item text-body">Total tasks run<span class="badge">12</span></li>
<li class="list-group-item text-success">Successful tasks<span class="badge">4</span></li>
<li class="list-group-item text-warning">Warnings<span class="badge">3</span></li>
<li class="list-group-item text-danger">Failed tasks<span class="badge">5</span></li>
</ul>
</div>
<div class="panel-footer">End of execution log information</div>
</div>
</div>
</body>
</html>
我认为您只需将执行日志信息封装在面板主体分区中，使其具有相同的间距，然后将左侧的ul填充、底部的新面板主体和h2标记的底部边距都调整为0。
null
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Automatic tasks report</h2>
<div class="panel panel-default">
<div class="panel-heading">Execution summary of tasks<span class="caret"></span></div>
<div class="panel-body" style="padding-bottom: 0;">
<h2 style="margin-bottom: 0;">Execution Log Information</h2>
</div>
<div class="panel-body">
<ul class="list group" style="padding-left: 0;">
<li class="list-group-item text-body">Total tasks run<span class="badge">12</span></li>
<li class="list-group-item text-success">Successful tasks<span class="badge">4</span></li>
<li class="list-group-item text-warning">Warnings<span class="badge">3</span></li>
<li class="list-group-item text-danger">Failed tasks<span class="badge">5</span></li>
</ul>
</div>
<div class="panel-footer">End of execution log information</div>
</div>
</div>