css - 无法将页脚放在正确的位置 - chalice 布局 - 引导网格

标签 css

我尝试使用 bootstrap grod 在 chalice 布局中定位页脚,但我无法这样做。我什么都试过了

我尝试使用 bootstrap grod 在 chalice 布局中定位页脚,但我无法这样做。我什么都试过了 我尝试使用 bootstrap grod 将页脚定位在 chalice 布局中,但我无法这样做。我什么都试过了

有人可以帮忙吗? ` 网页, body { 高度:100%; 宽度:100%;

       .container-fluid {
           border: 5px solid plum;
        }

        .main-row {
            border: 5px solid orangered;
        }

        .left-sidebar {
            border: 3px solid teal;
        }

        .nav-bar {
            border: 3px solid crimson;
        }

        .main-right-sidebar {
            border: 3px solid khaki;
            padding: 0px;
        }

        .main-bar {
            border: 3px solid greenyellow;
        }

        .right-sidebar {
            border: 3px solid turquoise;          
        }

        .footer {
            border: 3px solid deeppink;
        }

        .cont {
            border: 3px solid brown;
            padding: 0px;
        }
    </style>
</head>

<body>
    <div class="container-fluid h-100">
        <div class="row h-100 main-row">
            <div class="col-2 h-100 left-sidebar">
            </div>

            <div class="col-8 h-75 main-right-sidebar">
                <div class="col-12 h-25 nav-bar">
                </div>
                <div class="col-12 h-75 main-bar">
                </div>
            </div>


            <div class="col-2 h-75 right-sidebar">
            </div>

            <div class="col-10 h-25 footer">
            </div>
        </div>
    </div>
</body>
</html>`

enter image description here

最佳答案

尝试偏移你的页脚。

<div class="col-md-10  offset-md-1 h-25 footer">
            </div>

关于css - 无法将页脚放在正确的位置 - chalice 布局 - 引导网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57684893/

相关文章:

css - 当 html 设置为 100% 时,IE 不允许滚动

javascript - 如何为道场 Accordion 设置不同的 child 尺寸

python - 反转 CSS 中的颜色值

css - 如何调试随机忽略 CSS 更改的 Safari?

javascript - jQuery 如何将 CSS 应用于选定的文本

java - 如何在没有 UiBinder 的情况下将 CellTable.Style 与 GWT 2.7.0 一起使用?

html - 侧边栏不会在砌体布局中到达顶部

html - Css 变换 : Scale Only Works in Dev Tools

html - 在同一行 float <p> 和 <ul> 元素

css - 检查数据属性是否设置在父 div css/less 并将其用于子 div