Bootstrap侧边栏导航调整大小问题

Question

我的Bootstrap 3.3.6侧边栏导航存在一些问题。

问题＃1 - 在移动视图中，内容不希望遵循padding-top：70px位于固定顶部导航栏下方的下方。当侧边栏（左侧）变为标准Bootstrap顶部导航时会发生这种情况。

问题＃2 - 只有当屏幕不是移动/桌面时，才会显示侧边栏导航的一半。因此，在平板电脑类别的某个地方，您只能获得侧边栏的一半。

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

这是JSFiddle https://jsfiddle.net/fdkdvr2b/1/

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

^因为Stackoverflow不想让我在没有代码的情况下提交JSFiddle，所以不得不把它放在上面。但是你会在JSFiddle中找到所有代码。 （css，html＆amp; js）

此处是嵌入式代码，您可以在其中查看结果（全屏） https://jsfiddle.net/fdkdvr2b/1/embedded/

Answer 1

问题＃1：将此规则放在媒体查询＆gt;

中

@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）在较小的屏幕（大约400px或更低）上，你应该考虑调整大小你的徽标，因为它没有足够的空间和navbar-toggle。 3）你的标题，标签和langs（取决于它们可以结束的项目/长度）可以更好地叠在一起，因为缩略图在​​视口很小时没有提供那么多空间/介质，否则你会从缩略图/列中看到这些溢出。

请参阅FullPage上的工作示例代码段。

＆＃13;

＆＃13;

function htmlbodyHeightUpdate() {
  var height3 = $(window).height()
  var height1 = $('.nav').height() + 50
  height2 = $('.main').height()
  if (height2 > height3) {
    $('html').height(Math.max(height1, height3, height2) + 10);
    $('body').height(Math.max(height1, height3, height2) + 10);
  } else {
    $('html').height(Math.max(height1, height3, height2));
    $('body').height(Math.max(height1, height3, height2));
  }

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

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
 body,
html {
  height: 100%;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
}
nav.sidebar.navbar {
  border-radius: 0px;
}
nav.sidebar,
.main {
  -webkit-transition: margin 200ms ease-out;
  -moz-transition: margin 200ms ease-out;
  -o-transition: margin 200ms ease-out;
  transition: margin 200ms ease-out;
}
nav.sidebar .navbar-nav > li a > i {
  margin-top: 2px;
}
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
  display: inline-block;
  background: #b11 url('https://e71a723b872a3a54921d-0feb5a410d64308aeb3d333fa1955229.ssl.cf1.rackcdn.com/assets.rev-1.sbf/bokkusu-logo-2016-v4.4.1.webp') no-repeat center;
  width: 300px;
  height: 60px;
  color: transparent;
  background-size: cover;
}
.navbar-inverse {
  border: none;
}
@media (min-width: 768px) {
  .main {
    position: relative;
    padding: 10px 0;
    margin-left: 300px;
  }
  nav.sidebar.navbar.sidebar > .container .navbar-brand,
  nav.sidebar.navbar.sidebar > .container-fluid .navbar-brand {
    margin-left: 0px;
  }
  nav.sidebar .navbar-brand,
  nav.sidebar .navbar-header {
    text-align: center;
    width: 100%;
    margin-left: 0px;
  }
  nav.sidebar a {
    padding-right: 13px;
  }
  nav.sidebar .navbar-nav > li {
    border-bottom: 1px rgba(0, 0, 0, 0.25) solid;
  }
  nav.sidebar .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  /*allows nav box to use 100% width*/
  nav.sidebar .navbar-collapse,
  nav.sidebar .container-fluid {
    padding: 0;
  }
  /*colors dropdown box text */
  nav..navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  /*gives sidebar width/height*/
  nav.sidebar {
    width: 300px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: -300px;
    height: 100%;
  }
  /*give sidebar 100% width;*/
  nav.sidebar li {
    width: 100%;
  }
  /* Move nav to full on mouse over*/
  nav.sidebar:hover {
    margin-left: 0px;
  }
  /*for hiden things when navbar hidden*/
  .forAnimate {
    opacity: 0;
  }
}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover,
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
  color: #CCC;
  background-color: transparent;
}
nav:hover .forAnimate {
  opacity: 1;
}
section {
  padding-left: 15px;
}
@media (max-width: 767px) {
  body {
    padding-top: 70px;
  }
  .navbar.navbar-inverse .navbar-toggle {
    margin-top: 12.5px
  }
}
@media (max-width: 400px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    width: 240px;
    height: 50px;
    padding-top: 0;
  }
  .navbar.navbar-inverse .navbar-toggle {
    margin-top: 8px;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse sidebar navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Latest <i class="fa fa-clock-o fa-lg pull-right"></i></a>
        </li>
        <li><a href="#">Tags <i class="fa fa-tags fa-lg pull-right"></i></a>
        </li>
        <li><a href="#">Artists <i class="fa fa-pencil-square fa-lg pull-right"></i></a>
        </li>
        <li><a href="#">Groups <i class="fa fa-users fa-lg pull-right"></i></a>
        </li>
        <li><a href="#">Random <i class="fa fa-repeat fa-lg pull-right"></i></a>
        </li>
        <li><a href="#">Forum <i class="fa fa-life-ring fa-lg pull-right"></i></a>
        </li>
        <li><a href="#">Blog <i class="fa fa-rss fa-lg pull-right"></i></a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="main">

  <div class="container-fluid browse-content-view">
    <div class="row">

      <div class="col-lg-2 col-md-3 col-xs-6 browse-view">
        <div class="thumbnail browse-view-thumb">
          <img src="http://placehold.it/350x450" alt="" class="img-responsive">
          <div class="caption">
            <h4>title</h4>
            <p><span class="label label-primary">tage</span>
            </p>
            <p><span class="label label-default">langs</span>
            </p>
          </div>
        </div>
      </div>

      <div class="col-lg-2 col-md-3 col-xs-6 browse-view">
        <div class="thumbnail browse-view-thumb">
          <img src="http://placehold.it/350x450" alt="" class="img-responsive">
          <div class="caption">
            <h4>title</h4>
            <p><span class="label label-primary">tage</span>
            </p>
            <p><span class="label label-default">langs</span>
            </p>
          </div>
        </div>
      </div>

      <div class="col-lg-2 col-md-3 col-xs-6 browse-view">
        <div class="thumbnail browse-view-thumb">
          <img src="http://placehold.it/350x450" alt="" class="img-responsive">
          <div class="caption">
            <h4>title</h4>
            <p><span class="label label-primary">tage</span>
            </p>
            <p><span class="label label-default">langs</span>
            </p>
          </div>
        </div>
      </div>

      <div class="col-lg-2 col-md-3 col-xs-6 browse-view">
        <div class="thumbnail browse-view-thumb">
          <img src="http://placehold.it/350x450" alt="" class="img-responsive">
          <div class="caption">
            <h4>title</h4>
            <p><span class="label label-primary">tage</span>
            </p>
            <p><span class="label label-default">langs</span>
            </p>
          </div>
        </div>
      </div>

      <div class="col-lg-2 col-md-3 col-xs-6 browse-view">
        <div class="thumbnail browse-view-thumb">
          <img src="http://placehold.it/350x450" alt="" class="img-responsive">
          <div class="caption">
            <h4>title</h4>
            <p><span class="label label-primary">tage</span>
            </p>
            <p><span class="label label-default">langs</span>
            </p>
          </div>
        </div>
      </div>

      <div class="col-lg-2 col-md-3 col-xs-6 browse-view">
        <div class="thumbnail browse-view-thumb">
          <img src="http://placehold.it/350x450" alt="" class="img-responsive">
          <div class="caption">
            <h4>title</h4>
            <p><span class="label label-primary">tage</span>
            </p>
            <p><span class="label label-default">langs</span>
            </p>
          </div>
        </div>
      </div>

      <div class="col-lg-2 col-md-3 col-xs-6 browse-view">
        <div class="thumbnail browse-view-thumb">
          <img src="http://placehold.it/350x450" alt="" class="img-responsive">
          <div class="caption">
            <h4>title</h4>
            <p><span class="label label-primary">tage</span>
            </p>
            <p><span class="label label-default">langs</span>
            </p>
          </div>
        </div>
      </div>

      <div class="col-lg-2 col-md-3 col-xs-6 browse-view">
        <div class="thumbnail browse-view-thumb">
          <img src="http://placehold.it/350x450" alt="" class="img-responsive">
          <div class="caption">
            <h4>title</h4>
            <p><span class="label label-primary">tage</span>
            </p>
            <p><span class="label label-default">langs</span>
            </p>
          </div>
        </div>
      </div>

      <div class="col-lg-2 col-md-3 col-xs-6 browse-view">
        <div class="thumbnail browse-view-thumb">
          <img src="http://placehold.it/350x450" alt="" class="img-responsive">
          <div class="caption">
            <h4>title</h4>
            <p><span class="label label-primary">tage</span>
            </p>
            <p><span class="label label-default">langs</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;