如何用Bootstrap 4实现高占比低留白的HTML仪表盘布局？

要实现文本最大化、减少留白且布局整洁，针对你的现有代码，可通过以下调整达成目标：

核心修改点 #

• 清除默认内外边距：移除body、容器、表格的默认margin和padding，减少无用留白
• 响应式字体适配：用视窗宽度单位vw替代固定px，字体随屏幕自动缩放，避免溢出或过小
• 优化组件布局：调整表格和主内容区的结构，让排版更紧凑有序

修改后完整代码 #

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0; /* 清除body默认外边距 */
        }
        .container-fluid {
            padding: 0; /* 移除容器默认内边距 */
        }
        .row {
            margin: 0; /* 移除row默认外边距 */
        }
        .col-3, .col-9 {
            padding: 0; /* 移除列默认内边距 */
        }
        #table1 {
            margin: 0;
            height: 100vh; /* 表格占满视窗高度 */
            table-layout: fixed; /* 固定表格布局，避免单元格宽度混乱 */
            width: 100%;
        }
        #table1 tr td {
            font-size: 6vw; /* 响应式字体，随屏幕宽度缩放 */
            padding: 0.5rem; /* 保留少量内边距，避免内容贴边拥挤 */
            display: flex;
            justify-content: space-between; /* 标签和数字左右对齐 */
            align-items: center;
        }
        .widgetLabel {
            font-size: 8vw;
            margin-bottom: 1rem; /* 标签和数字间留少量间距 */
        }
        .mainNumber {
            font-size: 25vw;
            line-height: 1; /* 减少数字行高，压缩垂直留白 */
        }
        .col-9 {
            min-height: 100vh; /* 主内容区占满视窗高度 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-3">
                <table id="table1" class="table table-bordered">
                    <tr><td><div>widget 1</div><div>55</div></td></tr>
                    <tr><td><div>widget 2</div><div>55</div></td></tr>
                    <tr><td><div>widget 3</div><div>55</div></td></tr>
                </table>
            </div>
            <div class="col-9">
                <div class="widgetLabel">Widget</div>
                <div class="mainNumber">55</div>
            </div>
        </div>
    </div>
</body>
</html>

关键调整说明 #

1. vw字体单位：6vw表示字体宽度为视窗宽度的6%，25vw为主数字的占比，确保在任何屏幕下都能最大化显示且不会超出容器
2. 满高度布局：通过100vh让左右两栏都占满整个屏幕高度，消除上下方向的留白
3. 表格布局优化：table-layout: fixed让三个表格单元格宽度均匀分配，flex布局让每个单元格内的标签和数字左右对齐，排版更整洁
4. 最小化留白：移除所有不必要的默认内外边距，仅保留少量内边距避免内容过于贴边拥挤

内容的提问来源于stack exchange，提问作者Rod