Question

我正在使用bootstrap网格布局来显示div，如下所示：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4" ng-if="data1.length"></div>
        <div class="col-md-4" ng-if="data2.length"></div>
        <div class="col-md-4" ng-if="data3.length"></div>
    </div>
    <div class="row">
        <div class="col-md-4" ng-if="data4.length"></div>
    </div>
</div>

现在我想将第二行的第一个div移动到第一行，如果data2或data3的长度为0.这是否可以在bootstrap？

Answer 1

为此您需要使用JavaScript。首先，您需要定义条件，然后将内容放入div中。

<div class="col-md-4" id="mydiv"></div>
<div class="col-md-4" id="mydiv2"></div>
<!-- and so on -->
<script>
if(data2.length = 0 or data3.length = 0){
    document.getElementById('mydiv').innerHTML = 'your content';
}
</script>

希望对你有用;）

Answer 2

对于这种情况，如果data2和data3的长度为零。您可以使用bootstrap可见和隐藏类 https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

将div移动到bootstrap网格布局中的第一行

2 个答案: