Question

我正在Yii2中处理我的Web应用程序。这是html布局：

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="thumbnail"> 
                <div class="caption">
                    <h3><?php echo $value['strategy_title']; ?></h3>
                    <p><?php echo $value['strategy_description']; ?></p>
                    <p><button  class="btn btn-info btn-holder" 
                                type="button" 
                                data-toggle="collapse" 
                                data-target="#<?php echo $value['strategy_title']; ?>"
                                aria-expanded="false" 
                                aria-controls="<?php echo $value['strategy_title']; ?>">
                        Know more
                    </button></p>
                    <div class="collapse" id="<?php echo $value['strategy_title']; ?>">
                        <p>
                            <!-- Here is the column chart -->
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row collapse" id="<?php echo $value['strategy_title']; ?>">
        <p>
            <!-- Here is the row chart -->
        </p>
    </div>
</div>

这只是整个页面的一部分。因此，我实际使用的是带有折叠按钮的缩略图库，该按钮可将Highchar.js切换为隐藏在Collapse块中。因此，当页面处于移动视图状态时，我想使折叠按钮在其下方自行切换图表的块，就像在图片上一样。否则，当页面处于桌面视图状态时，我要使折叠按钮切换行，这是图片上的示例。

Answer 1

我做到了，但是我想我的解决方案可能不正确。所以我用了两个不同类别的按钮

<p><button  class="btn btn-info btn-holder-xs" 
                            type="button" 
                            data-toggle="collapse" 
                            data-target="#<?php echo $value['strategy_title'] . "-xs"; ?>"
                            aria-expanded="false" 
                            aria-controls="<?php echo $value['strategy_title'] . "-xs"; ?>">
                    Узнать больше
                </button></p>
                <p><button  class="btn btn-info btn-holder-md" 
                            type="button" 
                            data-toggle="collapse" 
                            data-target="#<?php echo $value['strategy_title']; ?>"
                            aria-expanded="false" 
                            aria-controls="<?php echo $value['strategy_title']; ?>">
                    Узнать больше
                </button></p>

然后我写了一些CSS @media

@media only screen and (max-width : 768px) {
.btn-holder-xs {
    display: block;
}
.btn-holder-md {
    display: none;
}
}
@media only screen and (min-width : 768px) {
    .btn-holder-xs {
        display: none;
    }
    .btn-holder-md {
        display: block;
    }
}

仅在移动设备视图上折叠列，仅在桌面视图上折叠行

1 个答案: