Javascript 引导。容器流体溢出

我在StackOverflow中寻找了很多解决方案，但都没有一个解决，所以我希望有人能在这篇文章中直接帮助我

我正在为网页制作一个简单的导航栏，我想让它完全填满浏览器窗口的宽度，所以我给了它一个类.container fluid，它在一台大型计算机上工作得非常好，但是当使用笔记本电脑时，.container fluid内的元素会像这样溢出窗口：

更好地看一看它是这样的：

为什么会这样

代码如下：

HTML

JAVASCRIPT

$(document).ready(function () {
    var h = window.innerHeight;
    $('.main').css('height', h + 'px');
});

---

包装按钮的

.col-sm-2

类太窄，无法容纳内容。我将从这些列中删除

.col-*

类，从按钮的父级中删除

.row

，并使用

.d-flex

代替，在按钮之间应用

边距

，并在

.header.row

中添加填充（以匹配与之前类似的内容，尽管这不是必需的）

这是一支钢笔，可以帮你修改SCS

$（文档）.ready（函数（）{
var h=窗内高度；
$（'.main'）.css（'height'，h+'px'）；
});
@导入url（“https://fonts.googleapis.com/css?family=Lato");
.标题{
背景色：#21252b；
高度：70像素；
颜色：#76c888；
}
.标题.行{
身高：100%；
填充：0 30px；
}
.标题h1{
字体系列：信使，无衬线；
}
.header.btn{
颜色：#76c888；
边框颜色：#76c888；
字体系列：拉托，无衬线；
左边距：1米；
}
.header.btn:悬停{
颜色：#21252b；
背景色：#76c888；
}
梅因先生{
背景：黑色；
}

__科德库普__
普利基
说明书
下载游戏
为什么要使用javascript将高度设置为与设备相同？您可以使用
高度：100vh在CSS中。
@import url('https://fonts.googleapis.com/css?family=Lato');

$primary-color: rgb(118, 200, 136);
$bg-color: rgb(33, 37, 43);

.header {
    background-color: $bg-color;
    height: 70px;
    color: $primary-color;

    .row {
        height: 100%;
    }

    h1 {
        font-family: Courier, sans-serif;
    }

    .btn {
        color: $primary-color;
        border-color: $primary-color;
        font-family: Lato, sans-serif;

        &:hover {
            color: $bg-color;
            background-color: $primary-color;
        }
    }
}

.main {
    background: black;
}

$(document).ready(function () {
    var h = window.innerHeight;
    $('.main').css('height', h + 'px');
});