时间戳

首页 > 解决方案 > 显示创建的内联列空间

html - 显示创建的内联列空间

问题描述

.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>

我需要这个不要像照片中那样有空间，但要让左边的 col 向上并具有相同的高度 在此处输入图像描述

我需要这种方式，因为在响应时我需要它就像现在这样，左栏和右栏在它下面 在此处输入图像描述

我试过这样的另一种方式

.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>

第二种方法我实现了我想要的，但是在响应右列时它不在左列的正下方，就像这样，有谁知道如何解决这个问题，谢谢。 在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

这和你要问的一样吗？

$(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>

推荐阅读