Отображение созданного пространства встроенных столбцов

.row {
  background: gray;
  margin-top: 20px;
}
.col-md-6 {
  border: solid 1px red;
  padding: 10px;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class = "container">
  <div class = "row">
    <div class = "col-md-6">
     <div>Row1</div>        
    </div>
    <div class = "col-md-6">
      Dummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy Text </div>
     <div class = "col-md-6">
     <div>LeftRow2</div>        
    </div>
    <div class = "col-md-6">
     <div>Riight Row2</div>        
    </div>   
  </div>
</div>

Мне нужно, чтобы не было места, как на фото, а чтобы левый столбец поднимался вверх и имел одинаковую высоту. Отображение созданного пространства встроенных столбцов

Мне нужно так, потому что в отзывчивом мне нужно, чтобы это было так, как сейчас, левый столбец и правый столбец под ним Отображение созданного пространства встроенных столбцов

я пробовал по другому нравится

.row {
  background: gray;
  margin-top: 20px;
}
.col-md-6 {
  border: solid 1px red;
  padding: 10px;
}

<div class = "container">
  <div class = "row">
    <div class = "col-md-6">
     <div>Row1</div>
     <div>Riight Row2</div>
    </div>
    <div class = "col-md-6">
      Dummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy Text 
      
      </div> 
   </div>      
</div>

Второй способ, которым я достигаю того, что хочу, но затем в ответной правой колонке это не прямо под левой колонкой, это так, кто-нибудь знает, как решить эту проблему, спасибо. Отображение созданного пространства встроенных столбцов

Не могли бы вы объяснить, в каком макете должен отображаться какой div. с некоторым проверочным текстом, а не с этим длинным текстом.

— 12.02.2019 13:35

html css bootstrap-4

12.02.2019 13:18

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

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

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

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

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

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

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Это что-то вроде того, о чем вы спрашиваете?

$(document).ready(function(){
$(window).on('resize',function(){	
if ($(window).width() < 960) {
$('#row1').after($('#dummy'));
 } else {
	  location.reload(); 
	 $('dummy').removeAttr('id');
 }
	}); 
});

.red-border {
  border: solid 1px red;
  background: gray;
  margin-top: 10px;
}

<!doctype html>
<html>

<head>
  <meta charset = "utf-8">
  <title>Untitled Document</title>
</head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<body>

  <div class = "container">
    <div class = "row">
      <div class = "col-md-6">
        <div id = "row1" class = "row">
          <div class = "col-md-12">
            <div class = "red-border"> Row1</div>
          </div>
        </div>
        <div class = "row">
          <div class = "col-md-12">
            <div class = "red-border"> LeftRow2</div>
          </div>
        </div>
      </div>
      <div class = "col-md-6">
        <div id = "dummy" class = "row">
          <div class = "col-md-12">
            <div class = "red-border"> Dummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy Text</div>
          </div>
        </div>

        <div class = "row">
          <div class = "col-md-12">
            <div class = "red-border"> Riight Row2</div>
          </div>

        </div>
      </div>
    </div>
  </div>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>

</html>

12.02.2019 20:42

Другие вопросы по теме

Заголовок выравнивания с данными и столбцы данных

Угловой материал и пользовательские темы

Как я могу изменить содержимое другого div, когда я нажимаю div в своем слайд-шоу?

Нужно заменить innerText изображениями для крестиков-ноликов

Могу ли я минимизировать ширину абзаца, если его высота (количество строк) остается прежней?

Z-индекс с более низким значением по-прежнему отображается над другим div

Как автоматически выделить слово на странице с помощью css

Сделайте квадратный div, выровненный по правому верхнему краю, минус 50 пикселей и адаптивный

Как изменить значок кнопки при нажатии кнопки в react.js

Исправить последний выпадающий элемент при прокрутке

Отображение созданного пространства встроенных столбцов

Ответы 1

Другие вопросы по теме

Похожие вопросы