Bootstrap 4 内容和导航侧栏重叠问题

【问题标题】：Bootstrap 4 content and navigation side bar Overlap issueBootstrap 4 内容和导航侧栏重叠问题
【发布时间】：2017-08-12 14:18:42
【问题描述】：

我正在为我的大学开发一个应用程序。为此，我使用了Bootstrap-4。我正在做4个部门 header、content-top-fat **、**content-bot-fat **、**main-content 和 footer 我试试到fixed header、content-top-fat、content-bot-fat 和footer。我只需要滚动main-content 部分，在我添加侧边栏导航菜单后它看起来不太好它总是overlap 你可以理解我的代码和图像，请帮助我解决这个问题如何修复这个部分并且只滚动@ 987654333@ 部分，我的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;}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="mainbody">
<div class="header">
<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Dashboard</div>
  <div class="p-2"></div>
  <div class="p-2"><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span></div>
</div>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
</div>
<!--/header-->
<div id="content-top-fat">
  <div class="add-text-fat">
    <div class="d-inline-flex ">+</div>
    <div class="d-inline-flex ">Add New Rate Plan</div>

  </div>


</div>
<div id="content-bot-fat">


  <div class="d-flex justify-content-center"><p class="rateplan-date">Thursday, April, 20, 2017
  </p></div>
</div>
<!--content-->
<div class="main-content">
  <div id="contents">
 

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.
  </div>
</div>

<div class="footer"></div>
</body>

图片

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4


【解决方案1】：

将您的 .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;}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="mainbody">
<div class="header">
<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Dashboard</div>
  <div class="p-2"></div>
  <div class="p-2"><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span></div>
</div>


</div>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!--/header-->
<div id="content-top-fat">
  <div class="add-text-fat">
    <div class="d-inline-flex ">+</div>
    <div class="d-inline-flex ">Add New Rate Plan</div>

  </div>


</div>
<div id="content-bot-fat">


  <div class="d-flex justify-content-center"><p class="rateplan-date">Thursday, April, 20, 2017
  </p></div>
</div>
<!--content-->
<div class="main-content">
  <div id="contents">
 

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.
  </div>
</div>

<div class="footer"></div>
</body>

【讨论】：

  • 只需更改您的 .sidenav div，就像我在上面使用的答案或您使用的浏览器一样
  • 我更新了我的答案，现在检查一下。只需更改 .main-content margin-top:11% 或 12%
  • 先生，我认为它应该是 z-index: 0; #content-bot-fat { width: 100%;前10名％; z-index：0；高度：8%；填充：1.5%；背景：#e2dcdc；位置：固定； }
【解决方案2】：

我在您的代码中发现了问题并已修复。 希望对你有帮助:)

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;}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="mainbody">
<div class="header">
<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Dashboard</div>
  <div class="p-2"></div>
  <div class="p-2"><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span></div>
</div>


</div>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!--/header-->
<div id="content-top-fat">
  <div class="add-text-fat">
    <div class="d-inline-flex ">+</div>
    <div class="d-inline-flex ">Add New Rate Plan</div>

  </div>


</div>
<div id="content-bot-fat">


  <div class="d-flex justify-content-center"><p class="rateplan-date">Thursday, April, 20, 2017
  </p></div>
</div>
<!--content-->
<div class="main-content">
  <div id="contents">
 

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.
  </div>
</div>

<div class="footer"></div>
</body>

【讨论】：

    【解决方案3】：

    看起来这只是一个z-index 问题，可以通过将z-index: 5 从.sidenav 移动到.header 来解决

    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%;
  z-index: 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;
  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;}
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="mainbody">
<div class="header">
<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Dashboard</div>
  <div class="p-2"></div>
  <div class="p-2"><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span></div>
</div>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
</div>
<!--/header-->
<div id="content-top-fat">
  <div class="add-text-fat">
    <div class="d-inline-flex ">+</div>
    <div class="d-inline-flex ">Add New Rate Plan</div>

  </div>


</div>
<div id="content-bot-fat">


  <div class="d-flex justify-content-center"><p class="rateplan-date">Thursday, April, 20, 2017
  </p></div>
</div>
<!--content-->
<div class="main-content">
  <div id="contents">
 

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.
  </div>
</div>

<div class="footer"></div>
</body>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-06-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-03-16
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode