Question

我是新手，想提高自己的技能，我刚被卡住，我有6个框，左侧3个，右侧3个，我的问题是为什么框号'4'和'5'之间有空格当我使用'sm，md，lg'尺寸时？如何将5号框放在4号框下面而没有空格？并且有没有办法带走那些“空白”并仍然像这样进行这项工作？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  
 .box{
  width:30%;
  height:250px;
  border: solid black 1px;
  }
   .boxx{
  width:100px;
  height:100px;
  border: solid white 1px;
  }
   .bo{
  width:50%;
  height:550px;
  border: solid black 1px;
  }
  * {
    box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing -moz-box-sizing: border-box;
}
    </style>
</head>

<body>
<body>
<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="boxx mx-auto">
            white space 
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="box mx-auto">
            2
        </div>
    </div>
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="bo mx-auto">
            3
        </div>
    </div>
	  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="box mx-auto">
            4
        </div>
    </div>
	  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="boxx mx-auto">
            white space 
        </div>
    </div>
	  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <div class="box mx-auto">
          5
      </div>
    </div>
    </div>
</body>
</html>
   
</body>
</html>

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  
 .box{
  width:30%;
  height:250px;
  border: solid black 1px;
  }
   .bo{
  width:50%;
  height:550px;
  border: solid black 1px;
  }
  * {
    box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing -moz-box-sizing: border-box;
}
    </style>
</head>

<body>
<div class="row">
    <div class="col-md-6">
    </div>
    <div class="col-md-6">
        <div class="box mx-auto">
            2
        </div>
    </div>
     <div class="col-md-6">
        <div class="bo mx-auto">
            3
        </div>
    </div>
	  <div class="col-md-6">
        <div class="box mx-auto">
            4
        </div>
        <div class="box mx-auto">
          5
      </div>
    </div>
    </div>
</body>
</html>

框之间的引导空白

1 个答案: