我是堆栈溢出和 Bootstrap 的新手。我正在尝试使用大小为 2 和 10 的两列。但是当我使用它时，它们相互重叠，当我将其更改为 3 和 9 时，它们之间的空间太大。
我尝试在堆栈溢出中搜索并找到了这个 bootstrap columns overlapping
但按照这个，我的列总和等于 12，我的每一行作为一列仍然重叠。
这是我的 HTML 代码:
<!doctype html> <html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<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, shrink-to-fit=no">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div id="sidebar" class="customdiv" style="background-color: green; ">
<ul>
<li><h1 style="margin-left: -15px">project</h1></li>
<li><h1 style="margin-left: 15px">part1</h1></li>
</ul>
<hr style="background-color: gold; height:2px">
<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>
<li>project
<ul>
<li>project</li>
<li>project</li>
<li>project</li>
<li>project</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-lg-10">
<div class="customdiv">
<img src="zoo.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</body>
</html>
这是我的 CSS 代码
html,body {
height: 100%;
}
#sidebar{
width: 250px;
position: fixed;
left: 250px;
height:100%;
margin-left: -250px;
}
#list-header li{
padding-top: 10px;
padding-bottom: 10px; }
.customdiv li {
display: block
}
这是我的输出
and this is when i reduce the size of the window.
我尝试按照您的建议使用该方法，但它显示中间有太多空白。
i tried using the method as per your suggestion but it shows too much white space in between.
最佳答案
您必须如下使用列网格，并确保使用“img-responsive”类，它可以很好地将图像缩放到父元素
<div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
//sidebar content
</div>
<div class="col-md-6 col-sm-6 col-lg-6 col-xs-6">
//image content
<img class=".img-responsive" src="zoo.jpg" />
</div>
我建议您在开发之前检查这些引用资料。
关于html - bootstrap4 中网格/列之间的空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53237425/