Jquery 引导程序侧栏导航调整大小问题

我的Bootstrap 3.3.6侧栏导航有一些问题

问题#1- 在移动视图中，内容不希望位于固定顶部导航栏下方的padding top:70px之后。当侧边栏（左侧）变成标准引导顶部导航时，就会发生这种情况

问题#2- 侧边栏导航的一半仅在屏幕不是移动/桌面时显示。因此，在平板电脑类别的某个地方，你只得到了侧边栏的一半

问题#3-网格不希望在移动视图中显示2个块，而是只显示一个块。如问题1图像所示

这是JSFIDLE

$(document).ready(function () {
    htmlbodyHeightUpdate()
    $( window ).resize(function() {
        htmlbodyHeightUpdate()
    });
    $( window ).scroll(function() {
        height2 = $('.main').height()
        htmlbodyHeightUpdate()
    });

^由于Stackoverflow不想让我在没有代码的情况下提交JSFIDLE，所以不得不将其放在上面。但是您可以在JSFIDLE中找到所有代码。（css、html和js）

下面是嵌入的代码，您可以在其中查看结果（全屏）问题1：将此规则放置在媒体查询中>

$(document).ready(function () {
    htmlbodyHeightUpdate()
    $( window ).resize(function() {
        htmlbodyHeightUpdate()
    });
    $( window ).scroll(function() {
        height2 = $('.main').height()
        htmlbodyHeightUpdate()
    });

@media (max-width: 767px) {
  body {
    padding-top: 70px;
  }
}

问题2：我认为您没有明确声明侧边栏的宽度。声明宽度并添加

position:fixed

，然后将

main

div偏移相同的距离

nav.sidebar {
    width: 300px;
    position: fixed;
    right: -300px;
    height: 100%;
}
.main {
    position: relative;
    padding: 10px 0;
    margin-left: 300px;
}

问题3：您正在声明占用整个容器的

col-xs-12

，请使用

col-xs-6

包含到列中

其他需要注意的事项。 1） 最好为中等视口添加一个额外的列大小，否则可能会出现溢出。 2）在较小的屏幕上（大约4px或更小），你应该考虑<强>调整大小> <强>你的徽标，因为它没有足够的空间，而 NavBar切换。 3） 您的标题、标记和语言（取决于它们可以结束的项目/长度）可能会更好地堆叠在一起，因为当视口为小/中视口时，缩略图没有足够的空间，否则您将看到它们从缩略图/列溢出

请参阅完整页上的工作示例代码段

函数htmlbodyHeightUpdate（）{
var height3=$（窗口）.height（）
var height1=$（'.nav'）.height（）+50
高度2=$（'.main'）。高度（）
如果（高度2>高度3）{
$（'html'）.height（Math.max（height1、height3、height2）+10）；
$（'body'）。高度（数学最大值（高度1、高度3、高度2）+10）；
}否则{
$（'html'）.height（Math.max（height1、height3、height2））；
$（'body'）.height（数学最大值（height1、height3、height2））；
}
}
$（文档）.ready（函数（）{
htmlbodyHeightUpdate（）
$（窗口）。调整大小（函数（）{
htmlbodyHeightUpdate（）
});
$（窗口）。滚动（函数（）{
高度2=$（'.main'）。高度（）
htmlbodyHeightUpdate（）
});
});
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400700）；
身体，
html{
身高：100%；
宽度：100%；
字体系列：“开放式Sans”，无衬线；
}
导航栏{
边界半径：0px；
}
导航侧栏，
梅因先生{
-webkit过渡：200毫秒的余量减少；
-moz过渡：边缘200ms放松；
-o型过渡：边缘200ms放松；
过渡：200ms的裕度缓和；
}
导航栏导航>LIA>i{
边缘顶部：2倍；
}
.navbar>.container.navbar品牌，
.navbar>.container fluid.navbar品牌{
显示：内联块；
背景：#b11 url（'https://e71a723b872a3a54921d-0feb5a410d64308aeb3d333fa1955229.ssl.cf1.rackcdn.com/assets.rev-1.sbf/bokkusu-logo-2016-v4.4.1.webp“）无重复中心；
宽度：300px；
高度：60px；
颜色：透明；
背景尺寸：封面；
}
.导航条反转{
边界：无；
}
@介质（最小宽度：768px）{
梅因先生{
位置：相对位置；
填充：10px0；
左边距：300px；
}
nav.sidebar.navbar.sidebar>.container.navbar品牌，
nav.sidebar.navbar.sidebar>.container fluid.navbar品牌{
左边距：0px；
}
导航栏。侧栏。导航栏品牌，
导航栏侧栏导航栏标题{
文本对齐：居中；
宽度：100%；
左边距：0px；
}
导航侧栏a{
右侧填充：13px；
}
导航栏导航>li{
边框底部：1pxRGBA（0,0,0,0.25）实心；
}
导航栏侧边栏导航栏打开下拉菜单{
位置：静态；
浮动：无；
宽度：自动；
边际上限：0；
背景色：透明；
边界：0；
-webkit盒阴影：无；
盒影：无；
}
/*允许导航框使用100%宽度*/
导航栏，侧栏，导航栏塌陷，
导航侧栏。容器流体{
填充：0；
}
/*颜色下拉框文本*/
导航..导航栏反转.导航栏导航打开.下拉菜单>li>a{
颜色：#777；
}
/*提供侧边栏的宽度/高度*/
导航侧栏{
宽度：300px；
位置：固定；
排名：0；
底部：0；
左：0；
右：-300px；
身高：100%；
}
/*给边栏100%的宽度*/
导航侧边栏li{
宽度：100%；
}
/*鼠标悬停时将导航移到全屏*/
导航侧栏：悬停{
左边距：0px；
}
/*当导航栏隐藏时隐藏的东西*/
.福安美特{
不透明度：0；
}
}
导航栏导航栏导航栏导航打开下拉菜单>li>a:悬停，
导航栏导航栏导航栏打开下拉菜单>li>a:焦点{
颜色：#CCC；
背景色：透明；
}
导航：悬停。用于导航{
不透明度：1；
}
部分{
左侧填充：15px；
}
@介质（最大宽度：767px）{
身体{
填充顶部：70px；
}
.navbar.navbar-reverse.navbar切换{
页边距顶部：12.5px
}
}
@介质（最大宽度：400px）{
.navbar>.container.navbar品牌，
.navbar>.container fluid.navbar品牌{
宽度：240px；
高度：50px；
填充顶部：0；
}
.navbar.navbar-reverse.navbar切换{
边缘顶部：8px；
}
}

切换导航