Question

我有这个布局（starting layout）。里面的盒子的高度是可扩展的（描述文字）。如果将一个框展开，则该行不应仅影响该列。我正在使用bootstrap网格。

此外，内部框是可过滤的，并且响应迅速，因此不能将它们包装在单个列中。

这甚至有可能吗？

当前行为：https://jsfiddle.net/kunji/t91xppcx/
问题在于，同一行中的框的高度也会增加。

开始布局：

+-------------------+
| +---+ +---+ +---+ |
| |   | |   | |   | |
| +---+ +---+ +---+ |
| +---+ +---+ +---+ |
| |   | |   | |   | |
| +---+ +---+ +---+ |
+-------------------+

所需的布局：

+-------------------+
| +---+ +---+ +---+ |
| |   | |   | |   | |
| |   | +---+ +---+ |
| |   | +---+ +---+ |
| +---+ |   | |   | |
| +---+ +---+ +---+ |
| |   |             |
| +---+             |
+-------------------+

html

<div class="row">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4"></div>
</div>

Answer 1

我看到的最快的方法是先将其划分为要在页面或容器上显示的列数，然后在需要时不会影响整个行（多个表单元格和列）将行扩展为一列。然后，您可以在每一列中使用flex进行任意布局，但是在这种情况下，您可以仅使用引导网格轻松地对其进行管理。对于更具动态性的网页，您可以根据需要的列数添加 bootstrap 类col-xs-12 col-sm-4与Jquery，并使用相同的思想将文章划分为列数你要的那个。

var $clickme = $('.clickme'),
    $box = $('.box');

$box.hide();

$clickme.click( function(e) {
    $(this).text(($(this).text() === 'Hide' ? 'Show' : 'Hide')).next('.box').slideToggle();
    e.preventDefault();
});

.yellow{
  background: yellow
}
.pink{
  background: pink
}
.grey{
  background: grey
}
.article{
  background: tomato;
  margin: 5px;
  display: flex;
  flex-direction: column;
}
.article img{
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-4 yellow">
        <div class="article">
          1
        </div>
        <div class="article">
          2
        </div>
    </div>
    <div class="col-xs-12 col-sm-4 pink">
        <div class="article">
           <img src="https://picsum.photos/400/300/?random"/>
           <p>3</p>
           <a href="#" class="clickme content">More</a>
           <p class="box content">
             Lorem Ipsum is simply dummy text of the printing and typesetting industry
          </p>
        </div>
        <div class="article">
          4
        </div>
        <div class="article">
          5
        </div>
    </div>
    <div class="col-xs-12 col-sm-4 grey">
        <div class="article">
          6
        </div>
        <div class="article">
           <img src="https://picsum.photos/400/290/?random"/>
           <p>7</p>
           <a href="#" class="clickme content">More</a>
           <p class="box content">
             Lorem Ipsum
          </p>
        </div>
    </div>
  </div>
</div>

带有可扩展子级的flexbox

1 个答案: