我一直试图在bootstrap4中创建一个项目。我是新手，因此对此了解不多。
我创建了两个大小分别为10和2的列。该大小为2的列，即我的侧边栏宽度为250px。但是，当我尝试调整窗口大小时，内容开始相互重叠。我正在尝试寻找一个答案，其中主要内容是大小为10的列，而侧边栏是固定的，不幸的是，我每次都失败了。在全屏模式下，我试图在2列之间放置填充，但这也不起作用。
这是我的html代码：
> > <!doctype html> <html lang="en">
> <head>
>
> <link rel="stylesheet" href= "css/bootstrap.min.css" type="text/css">
> <link rel="stylesheet" href="customcss.css" type="text/css">
> <meta name="viewport" content="width=device-width, initial-scale=1">
> <title>Yatin Pandit</title>
>
> </head>
> <body>
> <div class="container-fluid">
> <div class="row">
> <!--edited d-mdblock in main css-->
> <div class="col-md-4 col-sm-0 col-lg-2 col-0 col-xl-2" id="test1">
> <div id="sidebar" class="customdiv">
> <ul>
> <li><h1 style="margin-left: -15px">project</h1></li>
> <li><h1 style="margin-left: 15px">project</h1></li>
> </ul>
> <hr id="sidebarline" style="width:70%">
> <br>
> <ul id="list-header">
> <li>project</li>
> <li>project</li>
> <li>project</li>
> <li>project
> <ul>
> <li>project</li>
> <li>project</li>
> <li>project</li>
> </ul>
> </li>
>
> </ul>
> </div>
> </div>
>
>
>
>
>
> <div class="col-md-6 col-sm-12 col-lg-10 col-12 col-xl-10 " id="test2">
> <div class="row">
>
>
> <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12">
> <div class="customdiv1">
> <img src="zoo.jpg" class="mx-auto d-block img-fluid rounded-circle" style="width: 200px; height: auto">
>
> </div>
> </div>
>
> <!--HEADER CCODES-->
> <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12">
> <div class="text-center" id="namehead">
> <h1 style="font-size: 400%;background-color: gray" id="head1">h1 heaeder</h1>
>
> </div>
> </div>
>
> <!--HEADER CODE COMPLETED-->
>
>
> <!--ABOUT ME-->
> <div class="col-md-12 col-sm-12 col-lg-12 col-xs-12">
> <div class="text-center" id="aboutme">
> <h1 id="header" style="font-size: 280%; color: #5f8b8b">ABOUT</h1>
> <br>
> <br>
> <p>hellloollogogogo</p>
> </div>
> </div>
> <!--ABOUT ME ENDED-->
>
> </div>
> </div>
> </div>
> </div>
>
> </body> </html>
这是我的CSS
html,body {
> height: 100%;
> overflow-x: auto; }
>
>
> #sidebar{
> width: 250px;
> position: absolute;
> margin-left: -25px;
> background-color: black;
> font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
> font-style: italic;
> color: aliceblue;
> height: 100%;
> overflow-y: auto; } .my-sidebar {
> -ms-flex: 0 0 230px;
> flex: 0 0 230px;
> background-color: greenyellow;
> position: relative; }
> #list-header{
> margin-top: -20px; }
>
> #list-header li{
> padding-top: 10px;
> padding-bottom: 10px; }
>
> .customdiv li {
>
> display: block }
>
> .customdiv1{
>
> padding-top:8px; } .customdiv1 img{
> border: 1px;
> border-style: solid;
> border-color: rgb(165, 144, 144);
> padding-top: 1px; }
>
> #sidebarline{ height: 30px; border-style: solid; border-color: #D3D3D3; border-width: 1px 0 0 0; border-radius: 20px; margin-bottom: 0px; margin-top: 1px; padding-left: 55px; }
>
> #contenthr2{
> display: block;
> content: "";
> height: 30px;
> margin-top: 0px;
> border-style: solid;
> border-color: #D3D3D3;
> border-width: 0 0 3px 0;
> border-radius: 30px; }
>
>
> #contenthr1{ height: 30px; border-style: solid; border-color: #D3D3D3; border-width: 3px 0px 0 0; border-radius: 30px; margin-bottom: 0px;
> margin-top: -20px; }
>
> #namehead #head1{
>
> color: #035454;
> padding-bottom: 0; }
>
> #head5{
> color: black;
> padding-top: 0;
> margin-top:0px ; }
>
> #spanid{
> color: red;
> font-style: italic; }
>
> #ccinfo{
> display: inline-block; }
>
> #ccinfo a{
> padding-right: 20px;
> padding-left: 9px; }
>
> #aboutme{
> margin-top: 45px;
> background-color: #F3F3F3 }
>
> #shortinfo, #knowmoreme{
> margin-left: auto;
> margin-right: auto;
> max-width: 70%;
> text-align: left;
> display: block;
> padding-bottom: 55px; }
This is on full screen mode where I am not able to add space between sidebar and main content
This is how it overlaps when i reduce the screen size.. the screen size in this pic is 1028*592
