我尝试按照您的建议使用该方法，但是它之间显示了太多空白。

Question

我是堆栈溢出和引导程序的新手。我试图使用大小为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 
}

这是我的输出

this is the output

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.

Answer 1

您必须使用如下所示的列网格，并确保使用“ img响应”类，该类可以将图像很好地缩放到父元素

mutation {
  updateUser(
    where: { id: "abcd" }
    data: {
        groups: [{id:3}]
    }
  ) {
    id
    name
  }
}

我建议您在开发之前检查这些参考。

Reference 1

Reference 2

image reference 1

bootstrap4中的网格/列之间的空间

我尝试按照您的建议使用该方法，但是它之间显示了太多空白。

1 个答案: