时间戳

首页 > 解决方案 > 有没有办法摆脱水平暗填充？

html - 有没有办法摆脱水平暗填充？

问题描述

我试图在黑暗容器内水平使用几乎所有空间，以使用白色 col 的几乎所有宽度。有没有办法摆脱 Bootstrap 的预设填充？

<div class="col pt-5 text-center bg-warning text-light">Main
                    <div style="height:400px;"  class="row bg-dark">
                        <div class="col-5 bg-white mt-4 text-dark">Article</div>
                        <div class="col bg-white mt-4 text-dark">Article</div>
                    </div>

no-gutter 确实为我做了

这里是完整的代码......

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bloques con Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>
    <div class="container">
            <div>
                <div class="container text-center bg-dark p-3">
                    <div class="text-light bg-info col-3 offset-4 p-1">Header</div>
                </div>
            </div>
            <div class="row">
                <div style="height:300px;" class="col-4 text-center bg-info text-light pt-4">Aside</div>
                <div class="col pt-5 text-center bg-warning text-light">Main
                    <div style="height:400px;"  class="row bg-dark">
                        <div class="col-5 bg-white mt-4 text-dark">Article</div>
                        <div class="col bg-white mt-4 text-dark">Article</div>
                    </div>
                </div>
            </div>
            <div>
                <div class="bg-success text-center text-light py-3">Footer</div>
            </div>
        </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous"></script>
</body>

</html>

标签： htmlcssbootstrap-4

解决方案

而不是mt-4使用pt-4. 保证金不会做你想做的事

<div class="col pt-5 text-center bg-warning text-light">Main
                <div style="height:400px;"  class="row bg-dark">
                    <div class="col-5 h-100 bg-white pt-4 text-dark">Article</div>
                    <div class="col h-100 bg-white pt-4 text-dark">Article</div>
                </div>
            </div>

https://getbootstrap.com/docs/4.0/utilities/spacing/

推荐阅读