bootstrap4中的网格/列之间的空间 [英] Spaces between grids/columns in bootstrap4
问题描述
我是堆栈溢出和引导程序的新手.我试图使用大小为2和10的两列.但是当我使用它们时，它们彼此重叠，当我将其更改为3和9时，它们之间的空间太大.
I am new to stack overflow and bootstrap. I am trying to to use two columns of size 2 and 10. But when i use it they overlap each other and when I change it to 3 and 9 there is too much space in between.
我尝试在堆栈溢出中搜索并找到了这个 bootstrap列重叠
I tried searching in stack overflow and found this bootstrap columns overlapping
但根据此，我的列总和等于12，而我作为列的每一行仍然重叠.
but as per this my column sum is equal to 12 and my every row as a column still it is over lapping.
这是我的HTML代码:
Here is my HTML code:
<!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
}
这是我的输出
推荐答案
您必须使用如下所示的列网格，并且还必须确保使用"img响应式"类，以将图像很好地缩放到父元素
You have to use column grids as below and also make sure to use "img-responsive" class which scales image nicely to the parent element
<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>
我建议您在开发之前检查这些参考.
I suggest you to check these references before developing.
这篇关于bootstrap4中的网格/列之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
