Question

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

第二种方式实现了我想要的目标，但是在响应右列时它并不像在左列下方那样，有人知道如何解决此问题吗？谢谢。

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

显示已创建的内联列空间

1 个答案: