如何在bootstrap 3中创建砌体布局网格？

我正在使用boostrap来制作砌体布局。但我有问题。正如你在我的代码中看到的，我有5个div。我希望Div 4和5向上移动（检查附加图像），但我不知道如何去做。我可以用margin-top做到这一点，但它会打破响应式布局。那么，这有什么可能的解决方案？我是一个新手，这将是一个很大的帮助。提前致谢。如何在bootstrap 3中创建砌体布局网格？

<html> 
<head> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> 
    <style> 
     .div1{ 
      border: 2px solid; 
     } 
     .div2{ 
      border: 2px solid; 
     } 
     .div3{ 
      border: 2px solid; 
      height: 100px; 
     } 
     .div4{ 
      border: 2px solid; 
     } 
     .div5{ 
      border: 2px solid; 
      height: 40px; 
     } 
    </style> 
</head> 
<body> 
    <div class="col-md-12"> 
     <div class="col-md-4 div1">Div1</div> 
     <div class="col-md-4 div2">Div2</div> 
     <div class="col-md-4 div3">Div3</div> 
     <div class="col-md-8 div4">Div4</div> 
     <div class="col-md-8 div5">Div5</div> 
    </div> 
<!-- Loading minified js. jQuery and Bootstrap --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 
</html>

目前的布局是：

但我想它是这样的：

来源

2017-03-31 Gamer

我可怎么办呢？任何参考？ – Gamer

使用砖石.... http://masonry.desandro.com/extras.html检查引导部分 – DaniP

在这个特定的情况下，你可以使用嵌套..

<div class="col-md-12"> 
    <div class="row"> 
     <div class="col-md-8"> 
      <div class="row"> 
       <div class="col-md-6 div1">Div1</div> 
       <div class="col-md-6 div2">Div2</div> 
       <div class="col-md-12 div4">Div4</div> 
       <div class="col-md-12 div5">Div5</div> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="row"> 
       <div class="col-md-12 div3">Div3</div> 
      </div> 
     </div> 
    </div> 
</div>

或者，使用pull-right上DIV3 ...

<div class="col-md-12"> 
    <div class="row"> 
    <div class="col-md-4 div1">Div1</div> 
    <div class="col-md-4 div2">Div2</div> 
    <div class="col-md-4 div3 pull-right">Div3</div> 
    <div class="col-md-8 div4">Div4</div> 
    <div class="col-md-8 div5">Div5</div> 
    </div> 
</div>

Demo of both solutions

如果你想使用砌体，看到my answer为引导砌体的解决方案。

来源

2017-03-31 15:34:48 ZimSystem

真的很好我喜欢'拉'使用++ – DaniP

它不会是砖石，每说，但是从你的形象，你想要的是

<div class='row'> 
    <div class='col-md-8'> 
     <div class='row'> 
      <div class='col-md-6 div1'>Div1</div> 
      <div class='col-md-6 div2'>Div2</div> 
      <div class='col-md-12 div4'>Div4</div> 
      <div class='col-md-12 div5'>Div5</div> 
     </div> 
    </div> 
    <div class='col-md-4 div3'>Div3</div> 
</div>

来源

2017-03-31 15:33:53

你能做到这样：

// external js: masonry.pkgd.js 
 

 
$('.grid').masonry({ 
 
    itemSelector: '.grid-item', 
 
    columnWidth: '.grid-sizer', 
 
    percentPosition: true 
 
});

<html> 
 

 
<head> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> 
 
    <style> 
 
    .div1{ 
 
      border: 2px solid; 
 
      height: 40px; 
 
     } 
 
     .div2{ 
 
      border: 2px solid; 
 
      height: 40px; 
 
     } 
 
     .div3{ 
 
      border: 2px solid; 
 
      height: 100px; 
 
     } 
 
     .div4{ 
 
      border: 2px solid; 
 
      height: 40px; 
 
     } 
 
     .div5{ 
 
      border: 2px solid; 
 
      height: 40px; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="col-md-12"> 
 
    <div class="container-fluid"> 
 
     <!-- add extra container element for Masonry --> 
 
     <div class="grid"> 
 
     <div class="grid-sizer col-xs-4"></div> 
 
     <div class="grid-item col-xs-4 div1"></div> 
 
     <div class="grid-item col-xs-4 div2"></div> 
 
     <div class="grid-item col-xs-4 div3"></div> 
 
     <div class="grid-item col-xs-8 div4"></div> 
 
     <div class="grid-item col-xs-8 div5"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Loading minified js. jQuery and Bootstrap --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="http://masonry.desandro.com/masonry.pkgd.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

来源

2017-03-31 15:58:24

如何在bootstrap 3中创建砌体布局网格？

回答

相关问题