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

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

К вашему сведению, вы используете Bootstrap v4, классы col-xs-* больше не существуют в версии 4, вместо этого вы должны использовать col-*

— 07.03.2019 18:17

css html twitter-bootstrap bootstrap-4

07.03.2019 17:41

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 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>

спасибо за ответ, не могли бы вы также показать, как разместить поля «2, 4, 5» друг под другом, теперь между полями 4 и 5 есть пробел, когда вы видите его с размером рабочего стола

— 07.03.2019 18:04

Это просто. Нужно просто написать по одному отдельному ряду на 2, 4, 5 деление, потом все их прописать по очереди. Напишите еще одну строку для делений, которые вы хотите показать на другой стороне.

— 07.03.2019 18:13

ваш предыдущий код был хорош, но только между 4 и 5 был пробел, теперь вы сильно изменились.

— 07.03.2019 18:19

подождите... 2 минуты.

— 07.03.2019 18:23

@walee А теперь проверь. Между 4 и 5 нет пробела.

— 07.03.2019 18:28

теперь все выглядит нормально, если я хочу, чтобы все было в центре, я просто добавляю поля?

— 07.03.2019 18:40

На больших экранах все еще есть пустое пространство между 4 и 5.

— 07.03.2019 18:42

@walee, вы можете использовать класс начальной загрузки text-center, чтобы центрировать разделение. Пожалуйста, отметьте это, если вы счастливы.