我是堆栈溢出和引导程序的新手。我试图使用大小为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.
答案 0 :(得分:0)
您必须使用如下所示的列网格,并确保使用“ img响应”类,该类可以将图像很好地缩放到父元素
mutation {
updateUser(
where: { id: "abcd" }
data: {
groups: [{id:3}]
}
) {
id
name
}
}
我建议您在开发之前检查这些参考。