热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Bootstrap4内容和导航侧栏重叠问题

如何解决《Bootstrap4内容和导航侧栏重叠问题》经验,为你挑选了2个好方法。

林开发我的大学的一些应用程序,用于即时消息Bootstrap-4IM使4部分 标题,内容顶发 ,内容僵尸脂肪 ,主要内容页脚 IM尝试fixed header,content-top-fat,content-bot-fatfooter我需要滚动只是main-content一部分,即时通讯之后添加侧栏导航菜单它不是一个好看它总是overlap你可以理解我的代码和图像,请帮我解决这个问题如何修复这个部分和滚动只main-content部分,我的main-content部分不能滚动,

谢谢

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
  }

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }
body.mainbody {
  overflow: hidden;

  font: 13px/1.7em 'sans-serif';
  font-family: sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.bg-inverse {
  background-color: grey !important;
}

.header {
  width: 100%;
  height: 5%;

  background: red;
  position: fixed;
  top: 0;
}

.footer {
  width: 100%;
  height: 60px;
  background: grey;
  position: fixed;
  bottom: 0;

}

.main-content{
  height: 85%;
  margin-top:5%;
z-index: -1; overflow-y: scroll;
}

#content-top {
  width: 100%;
  top: 5%;
  height: 5%;
  padding: 1.5%;z-index: -1;
background-color: white;
  position: fixed;
}
#content-top-fat {
  width: 100%;
  top: 5%;
  background-color: white;
  height: 5%;
  padding: 1.5%;
  z-index: 1;
  position: fixed;
}
#content-bot-fat {
  width: 100%;
  top: 10%;  z-index: -1;
  height: 5%;
  padding: 1.5%;
  background:white;
  position: fixed;
}
.p-2 {
  padding: 0.4em 0.5rem !important;
}
#contents {
  /*position: fixed;*/

  overflow-x: hidden;
margin-top: 6.5rem;
padding: 2%;
}


.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 5;
  top: 0;
  right: 0;
  background-color: #eee;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


Dashboard
☰
+
Add New Rate Plan

Thursday, April, 20, 2017

Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. Components Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Components Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with p Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. Components Components Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

图片 图片



1> 小智..:

我在你的代码中发现了问题并修复了它.我希望它能帮到你:)

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
  }

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }
body.mainbody {
  overflow: hidden;

  font: 13px/1.7em 'sans-serif';
  font-family: sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.bg-inverse {
  background-color: grey !important;
}

.header {
  width: 100%;
  height: 5%;

  background: red;
  position: fixed;
  top: 0;
}

.footer {
  width: 100%;
  height: 60px;
  background: grey;
  position: fixed;
  bottom: 0;

}

.main-content{
  height: 85%;
  margin-top:11%;
z-index: 0; overflow-y: scroll;
}

#content-top {
  width: 100%;
  top: 5%;
  height: 5%;
  padding: 1.5%;z-index: -1;
background-color: white;
  position: fixed;
}
#content-top-fat {
  width: 100%;
  top: 5%;
  background-color: white;
  height: 5%;
  padding: 1.5%;
  z-index: 1;
  position: fixed;
}
#content-bot-fat {
  width: 100%;
  top: 10%;  z-index: -1;
  height: 5%;
  padding: 1.5%;
  background:white;
  position: fixed;
}
.p-2 {
  padding: 0.4em 0.5rem !important;
}
#contents {
  /*position: fixed;*/

  overflow-x: hidden;
margin-top: 5.0rem;
padding: 2%;
}


.sidenav {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 5;
  top: 5%;
  right: 0;
  background-color: #eee;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


Dashboard
☰
+
Add New Rate Plan

Thursday, April, 20, 2017

Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. Components Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Components Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with p Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. Components Components Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.


2> Udhay Titus..:

改变你.sidenav{position:fixed; top:0;}.sidenav{position:absolute; top:5%;}

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
  }

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }
body.mainbody {
  overflow: hidden;

  font: 13px/1.7em 'sans-serif';
  font-family: sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.bg-inverse {
  background-color: grey !important;
}

.header {
  width: 100%;
  height: 5%;

  background: red;
  position: fixed;
  top: 0;
}

.footer {
  width: 100%;
  height: 60px;
  background: grey;
  position: fixed;
  bottom: 0;

}

.main-content{
  height: 85%;
  margin-top:11%;
z-index: 0; overflow-y: scroll;
}

#content-top {
  width: 100%;
  top: 5%;
  height: 5%;
  padding: 1.5%;z-index: -1;
background-color: white;
  position: fixed;
}
#content-top-fat {
  width: 100%;
  top: 5%;
  background-color: white;
  height: 5%;
  padding: 1.5%;
  z-index: 1;
  position: fixed;
}
#content-bot-fat {
  width: 100%;
  top: 10%;  z-index: -1;
  height: 5%;
  padding: 1.5%;
  background:white;
  position: fixed;
}
.p-2 {
  padding: 0.4em 0.5rem !important;
}
#contents {
  /*position: fixed;*/

  overflow-x: hidden;
margin-top: 5.0rem;
padding: 2%;
}


.sidenav {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 5;
  top: 5%;
  right: 0;
  background-color: #eee;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


Dashboard
☰
+
Add New Rate Plan

Thursday, April, 20, 2017

Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. Components Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Components Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with p Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source. Responsive across devices One framework, every device. Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. Components Components Full of features With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了css回到顶部按钮相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文介绍了使用jQuery实现图片预加载和等比例缩放的方法,同时提供了演示和相关代码。该方法可以重置图片的宽度和高度,并使图片在水平和垂直方向上居中显示。 ... [详细]
  • html结构 ... [详细]
  • 本文整理了Java中org.dataconservancy.ui.model.DataItem.getFiles()方法的一些代码示例,展示了DataIte ... [详细]
  • 面试中2次被问到过这个知识点,实际开发中,应用事件委托也比较常见。JS中事件委托的实现主要依赖于事件冒泡。那什么是事件冒泡?就是事件从最深 ... [详细]
  • <!DOCTYPEhtml><htmllang=en><head><metacharset=UT ... [详细]
  • 前端不规则图像点击_如何在前端开发的潮流中快速学习学好学以致用?
    大家好,我是致力于前端开发,前端设计,前端入门的前端小姐姐,今天为大家带来的前端新知识是【雪碧图和滑动门】,不 ... [详细]
author-avatar
羊鲜鸡美蟹肥
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有