Html 当相邻列中的内容较长时，一个引导4列中的内容会移动

新的引导和我的第一篇文章在这里。我试图建立一个网站模板使用引导4。我遇到了一个问题，当我在相邻列中添加长文本内容时，左列中的垂直导航栏向下移动。如何防止导航栏移动？它似乎试图在柱内垂直居中。这两列位于同一行（“中间”），分别为

col-3

和

col-9

body，
运输署，
th{
字体系列：Verdana、Arial、Helvetica、无衬线；
字号：中等；
}
身体{
左边距：0px；
边际上限：0px；
右边距：0px；
边缘底部：0px；
背景色：#386890；
}
.集装箱{
宽度：1500px；
右边距：自动；
左边距：自动；
背景色：#EEEEEE；
字体系列：Arial、Helvetica、无衬线字体；
边缘顶部：20px；
字号：中等；
边缘底部：20px；
颜色：#386890；
}
.col-xl-12{
边缘顶部：15px；
边缘底部：15px；
}
.横幅{
边缘顶部：15px；
边缘底部：15px；
}
.中{
边缘底部：30px；
}
.col-xl-3{
左侧填充：30px；
颜色：#386890；
}
.导航{
左侧填充：30px；
颜色：#386890；
}
.col-xl-9{
宽度：自动；
浮动：左；
背景色：#FFFFFF；
高度：自动；
文本对齐：左对齐；
左边距：15px；
右边距：0px；
字体大小：90%；
填充：15px；
}
.页脚{
自我调整：伸展；
文本对齐：居中；
字体大小：90%；
}
.导航药丸{
文本对齐：居中；
填充：10px；
背景色：#EEEEEE；
明确：两者皆有；
字体大小：110%；
颜色：#386890；
}
.导航药片{
背景色：#16F804；
}
.导航丸a:悬停{
颜色：#386890；
文字装饰：无；
字体大小：100%；
}
.导航丸a{
颜色：#386890；
文字装饰：无；
字体大小：100%；
}
李国荣先生{
列表样式类型：无；
显示：内联；
右边距：10px；
左边距：10px；
}
.导航药丸{
边际：0px；
填充：0px；
背景色：#EEEEEE；
字体大小：75%；
颜色：#386890；
}
.nav药丸。nav-link.active，
.nav.show>.nav链接{
颜色：#fff；
背景色：#ADB2BD；
}
.社会媒体{
利润率：15px；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。莫莱斯蒂·努克·非布兰迪·马萨。最重要的是，我们需要有一套设备来维护我们的尊严。卡苏斯·埃吉特·努克
aliquam sem中的scelerisque viverra mauris。你的生命价值拍卖人你的生命价值。viverra risus的convallis aenean和tortor高级侵权人。
法雷特拉和乌尔特里斯是一个新的要素。阿梅特·马蒂斯（Amet mattis）是一位不诚实的人。坐在大教室里。这是指矢状面和狮子座的两个直径。毛里斯岛生活酒店
直径为0.5毫米。这是一个非奥迪奥·尤伊斯莫德·拉齐尼亚之地

知识是一种美德，是一种美德，是一种美德，是一种美德。莫莱斯蒂·努克·非布兰迪·马萨。最重要的是，我们需要有一套设备来维护我们的尊严。卡苏斯·埃吉特·努克
aliquam sem中的scelerisque viverra mauris。你的生命价值拍卖人你的生命价值。viverra risus的convallis aenean和tortor高级侵权人。
法雷特拉和乌尔特里斯是一个新的要素。阿梅特·马蒂斯（Amet mattis）是一位不诚实的人。坐在大教室里。这是指矢状面和狮子座的两个直径。毛里斯岛生活酒店
直径为0.5毫米。这是一个非奥迪奥·尤伊斯莫德·拉齐尼亚之地

知识是一种美德，是一种美德，是一种美德，是一种美德。莫莱斯蒂·努克·非布兰迪·马萨。最重要的是，我们需要有一套设备来维护我们的尊严。卡苏斯·埃吉特·努克
aliquam sem中的scelerisque viverra mauris。你的生命价值拍卖人你的生命价值。viverra risus的convallis aenean和tortor高级侵权人。
法雷特拉和乌尔特里斯是一个新的要素。阿梅特·马蒂斯（Amet mattis）是一位不诚实的人。坐在大教室里。这是指矢状面和狮子座的两个直径。毛里斯岛生活酒店
直径为0.5毫米。这是一个非奥迪奥·尤伊斯莫德·拉齐尼亚之地

问题在于

.navbar

具有flex属性

对齐项目：居中设置（引导默认设置）

如果元素具有
显示：柔性
和
柔性方向：行
，
对齐项目
将子元素与横轴对齐，在这种情况下，
主导航栏
与垂直中心对齐。（如果
flex direction
为列，则
align items:center
将水平居中）

您可以做的是通过将：
align items:flex start
添加到
.navbar
元素来覆盖引导程序的代码

以下是我添加到您的代码中的内容：

.middle .navbar {
  align-items: flex-start;
}

我还添加了
.middle
选择器，以确保它比
.navbar
更具体，并将覆盖BS样式


body，
运输署，
th{
字体系列：Verdana、Arial、Helvetica、无衬线；
字号：中等；
}
身体{
左边距：0px；
玛格