Question

这是我使用Bootstrap的第一次。我阅读了有关https://getbootstrap.com/docs/4.1/的文档和有关https://www.w3schools.com/bootstrap/的一些教程。

我创建了这个页面：

<!doctype html>
<html lang='en'>
    <head>
        <!-- required meta tags -->
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'> <!-- responsive meta tag -->

        <!-- bootstrap CSS -->
        <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css' integrity='sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB' crossorigin='anonymous'>

        <title>Hello, world!</title>
    </head>
    <body>

        <!--------------------------------------------------------------------------------------------------------->
        <!---------------------------------------------- NAV BAR END ---------------------------------------------->
        <nav class='navbar navbar-expand-sm bg-dark navbar-dark'>
            <a class='navbar-brand' href='#'>Navbar</a>
            <button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#collapsibleNavbar'>
                <span class='navbar-toggler-icon'></span>
            </button>
            <div class='collapse navbar-collapse' id='collapsibleNavbar'>
                <ul class='navbar-nav'>
                    <li class='nav-item'>
                        <a class='nav-link' href='#'>Link</a>
                    </li>
                    <li class='nav-item'>
                        <a class='nav-link' href='#'>Link</a>
                    </li>
                    <li class='nav-item'>
                        <a class='nav-link' href='#'>Link</a>
                    </li>    
                </ul>
            </div>  
        </nav>
        <!---------------------------------------------- NAV BAR END ---------------------------------------------->
        <!--------------------------------------------------------------------------------------------------------->

        <!------------------------------------------------------------------------------------------------------>
        <!---------------------------------------------- CONTAINER --------------------------------------------->
        <div class='container'>
            <div class='row'>
                <div class='col-sm-4' id = 'bubblemap' style='background-color:tomato;'>.col-sm-4</div>
                <div class='col-sm-8' id = 'heatmap' style='background-color:steelblue;'>.col-sm-8</div>
            </div>
            <div class='row'>
                <div class='col-sm-12' id = 'smallMultiples' style='background-color:greenyellow;'>.col-sm-12</div>
            </div>
        </div>
        <!---------------------------------------------- CONTAINER END ----------------------------------------->
        <!------------------------------------------------------------------------------------------------------>

        <!---------------------------------------------------------------------------------------------------->
        <!---------------------------------------------- FOOTER ---------------------------------------------->
        <div class='jumbotron text-center' style='margin-bottom:0'>
            <p>Footer</p>
        </div>
        <!---------------------------------------------- FOOTER END -------------------------------------------->
        <!------------------------------------------------------------------------------------------------------>

        <!-- optional JavaScrip: jQuery first, then Popper.js, then Bootstrap -->
        <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js' integrity='sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49' crossorigin='anonymous'></script>
        <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js' integrity='sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T' crossorigin='anonymous'></script>
    </body>
</html>

（此处为代码）。

如果屏幕较小，则结果为this;如果屏幕较大，则结果为this。

我喜欢设备视图但不喜欢更大的视图。我想在番茄和石灰div之前以及钢蓝和石灰div之后去掉白色空间。我能怎么做？我想只删除边距，而不是填充。

非常感谢

Answer 1

您正在寻找 container-fluid 而不是container。这是全宽容器。

https://www.codeply.com/go/PZQnLvtsoc

另外，请参考比{W3schools上的信息更可靠和最新的Bootstrap docs。 https://getbootstrap.com/docs/4.1/layout/overview/#containers

Answer 2

第41行

更改容器＆＃39;到＆＃39;容器 - 流体

删除div之前和之后的空格

2 个答案: