Bootstrap пустое пространство между коробками - PullRequest
Новая
       6

Bootstrap пустое пространство между коробками

1 голос
/ 07 марта 2019

Я новичок в начальной загрузке, пытаюсь улучшить свои навыки, я только что застрял, у меня есть 6 коробок, три левых и три правых, мой вопрос, почему между блоками № 4 и 5 есть место когда я нахожусь на 'см, мд, 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>

1 Ответ

1 голос
/ 07 марта 2019 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...