时间戳

首页 > 解决方案 > 引导框之间的空白

css - 引导框之间的空白

问题描述

我是新手试图提高我的技能，我只是卡住了，我有 6 个盒子，三个左侧和三个右侧，我的问题是为什么盒子编号 '4' 和 '5' 之间有空格当我' m 在“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>

标签： csshtmltwitter-bootstrapbootstrap-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;
  }
   .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>

推荐阅读