Html Bootstrap v3-Can'；t中心切换菜单+；垂直对齐它的底部

我的目标是让我的网站达到100%的设备高度，如果不受文本大小的限制，根本没有滚动条

这是一个6乘3的网格：

我的名字（col-4）|菜单（col-8）

我的照片（col-4）|我的文字（col-8）

空格（第4列使用偏移量）|页脚（第8列）

在xs大小中，它应该如下所示：

我的名字（col-8）|菜单（col-4）作为可折叠切换菜单

我的文本（第12列）

页脚（第12列）

我希望我的名字始终与底部和右侧的栏对齐。 我的主要问题是切换菜单在它自己的列中居中，也许vertica与底部对齐，所以它与我的名字垂直对齐。此外，我希望在列/行之间不留任何边距或填充

由于我为这个定制设置了导航栏的宽度限制，我似乎无法使用引导默认导航栏并按照我的想法进行调整，所以我一直在复制和粘贴代码。这是我的第一个网站，我基本上一直在学习，HTML和CSS可能都没有优化

完整代码如下：

html，正文{
宽度：100%；
最小高度：100%；
保证金：0；
填充：0；
背景颜色：米色；
}
导航{
身高：20%；
宽度：100%；
背景色：红色；
显示：表格；
}
#导航栏{
身高：20%；
背景色：红色；
显示：表格；
垂直对齐：底部对齐；
浮动：对；
}
.名单{
显示：内联块；
边缘底部：10px；
右边距：40px；
左边距：40px；
文本对齐：居中
}
保险商实验室{
显示：表格单元格；
垂直对齐：底部对齐；
背景：午夜蓝；
文本对齐：居中；
身高：100%；
宽度：100%；
浮动：无；
}
#包装纸{
边际：0px0；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}
#内容{
身高：70%；
背景色：透明；
显示：表格；
表布局：固定；
排名：0；
底部：0；
左：0；
右：0；
}
.行{
显示：表格行；
背景：透明；
}
左上校{
显示：表格单元格；
垂直对齐：中间对齐；
背景：午夜蓝；
文本对齐：居中；
浮动：无；
}
上校：对{
显示：表格单元格；
垂直对齐：中间对齐；
背景：森林绿；
文本对齐：居中；
浮动：无；
}
img{
高度：自动；
宽度：90%；
最大宽度：100%；
最大高度：100%；
}
p{
颜色：黑色；
}
页脚{
身高：10%；
背景色：红色；
字体大小：20px；
}
1.没有填充物{
填充：0！重要；
边距：0！重要；
}
.社会{
浮动：对；
右边距：20px；
边缘顶部：20px；
}

游乐场
我，我自己和我






切换导航






我应该在中间垂直对齐……BR>
拜伊