如何在bootstrap中将面板标题（左）和面板对齐到两边等距
实际上，我正在尝试获得图像中显示的输出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>
共有1个答案
我认为您只需将执行日志信息封装在面板主体分区中，使其具有相同的间距，然后将左侧的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>-
本文向大家介绍twitter-bootstrap 带标题面板，包括了twitter-bootstrap 带标题面板的使用技巧和注意事项，需要的朋友参考一下 示例 使用轻松将标题容器添加到面板中.panel-heading。您也可以<h1>-<h6>在.panel-title类中添加任何内容以添加预样式的标题。但是，的字体大小<h1>-<h6>被覆盖.panel-heading。 为使链接颜色正确，
-
主要内容：实例,面板标题,实例,面板脚注,实例,带语境色彩的面板,实例,带表格的面板,实例,带列表组的面板,实例本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的实例所示： 实例 <div class="panel panel-default"> <div class="panel-body"> 这是一个基本的
-
我有J标签窗格和几个标签。我面临的问题是我有一个面板，里面有2个按钮和一个文本区域。面板位于 JScroll 面板内。然后，我将 JScrollPane 添加到选项卡中，但按钮和文本区域彼此相邻，并在中心对齐。我想要的是JTextArea在按钮下方，而不是在按钮的右侧。我尝试过将BorderLayout用于按钮和文本区域（将按钮放在页面开始和文本区域页面结束），但它不会改变任何东西。
-
我正在构建一个Java程序。该程序的核心在JFrame中可视化，其中包含一个JMenuBar和各种JMenuItem和JMenu。关键是我在所有框架中添加了一个centralPanel，但是如果我在centralPanel中添加了一些内容，那么只有在调整主框架的大小、缩小或放大它时，它才会显示出来！代码如下： 这是构造函数： 在这里，我添加了中央面板，在这里，在ActionListener中，我试
-
我有网格面板。我想将树面板添加到该网格面板中的列中。 网格面板 树商店 例如，如果我想把这个树存储在下，也就是说，当我们点击Lisa时，树会扩展。我们怎么能做到呢。 谢谢你。
-
我有一个带有包含子面板的BoxLayout管理器的JPanel。我希望这些子面板内部的组件有一个左对齐，但它们总是出现居中。看起来BoxLayout正确地对齐了直接插入的组件，但当它们在子面板中时就不能做到这一点。 我修改了http://www.java2s.com/tutorial/java/0240__swing/yaxisalignaly.htm中的示例，以便将每个按钮放置在子面板中，然后将