Question

我对Bootstrap很新，我在尝试对齐标题时遇到问题。根据屏幕截图，当我在“活动工作流程”标题上放置一个h6标签时，它会在其底部放置一个边距使其偏离中心。我浏览了dev工具中的所有样式，并且无法弄清楚如何添加这个边距。在这里寻找任何形式的见解。

编辑：尝试从H6标签上拉出边距，但填充仍然存在，添加了另一个图像显示。

代码：

<div class="row">
   <div class="col-md-11">
   <h6>Active Workflow</h6>
</div>

Answer 1

它是由Bootstrap添加的......

.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
}

您可以使用..

将其删除using margin utils

<h6 class="mb-0">Active Workflow</h6>

阅读Bootstrap docs on Spacing。

Answer 2

bootstrap向标题元素（h1-h6）添加默认边距。您可以使用mb-0

覆盖此内容

 <h6 class="mb-0">text<h6>

Answer 3

所以我不确定它为什么会起作用，但我注意到在另一个页面上我没有特别使用H6标签，我已将它添加到标签中。出于某种原因，这完美地隔离了它。一个h6标签，即使它上面有mb-0，仍然可以证明文本的正确性。

<!DOCTYPE html>
<html> <head> <style type="text/css"> body {background: #eee;} </style> </head>
<body>
    <div style="float:left;">
        <canvas id="video-canvas" width=320 height=240 style="background:#000;"></canvas>
    </div>
    <pre align="left" id="log"></pre>
    <script>
        function Logger(id) {this.el = document.getElementById('log');}
        Logger.prototype.log = function(msg) {
            var fragment = document.createDocumentFragment();
            fragment.appendChild(document.createTextNode(msg));
            fragment.appendChild(document.createElement('br'));
            this.el.appendChild(fragment);
        };
        Logger.prototype.clear = function() {this.el.textContent = '';};
        var logger = new Logger('log');
    </script>
    <script type="text/javascript">
        var logelem = document.getElementById("log");
        var canvas = document.getElementById('video-canvas');
        function getMousePos(canvasDom, mouseEvent) {
            var rect = canvasDom.getBoundingClientRect();
            var scaleX = canvas.width / rect.width; 
            var scaleY = canvas.height / rect.height; 
            var x = (mouseEvent.clientX - rect.left)*scaleX;
            var y = (mouseEvent.clientY - rect.top)*scaleY;
            return {
                x: mouseEvent.clientX - rect.left,
                y: mouseEvent.clientY - rect.top
            };
        }
        canvas.addEventListener("mousedown", function (e) {
            var mousePos = getMousePos(canvas, e);
            logger.log("down " + mousePos.x + "," + mousePos.y);
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            logger.log("up " + mousePos.x + "," + mousePos.y);
        }, false);
        canvas.addEventListener("mousemove", function (e) {
            //logger.log("move " + mousePos.x + "," + mousePos.y);
            var mousePos = getMousePos(canvas, e);
        }, false);
    </script>
</body>
</html>

只有h6标签，该列的高度为23像素，标签为26。

Bootstrap h6标签边距问题

3 个答案: