Question

我使用Bootstrap 3手风琴折叠，现在所有内容都在一列中加载，我该如何制作，以便面板在桌面分辨率中使用多列，在移动模式下使用一列？

        <div class="row">

            <div class="panel-group" id="accordion">

                <?php
                foreach ($states as &$state) {
                    ?>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#<?php echo $state; ?>">
                                    <?php echo $state; ?></a>
                            </h4>
                        </div>
                        <div id="<?php echo $state; ?>" class="panel-collapse collapse in">
                            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                                minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                                commodo consequat.</div>
                        </div>
                    </div>
                <?php }
                ?>
            </div>

        </div>

修改

这是我编辑的html

            <div class="row">

                <div class="col-md-4 col-xs-12">

                    <div class="panel-group" id="accordion">

                        <?php
                        foreach ($states as &$state) {
                            ?>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#<?php echo preg_replace('/\s+/', '', $state); ?>">
                                            <?php echo $state; ?></a>
                                    </h4>
                                </div>
                                <div id="<?php echo preg_replace('/\s+/', '', $state); ?>" class="panel-collapse collapse in">
                                    <div class="panel-body">test</div>
                                </div>
                            </div>
                        <?php }
                        ?>

                    </div>

                </div>

            </div>

现在看起来像这样。桌面分辨率中只有一个细长列

Answer 1

我不确定这是不是你的意思，但将手风琴包装成一个级别是不够的？

像：

<div class="row">
     <div class="col-xs-12 col-md-4">
        <div class="panel-group" id="accordion">

            <?php
            foreach ($states as &$state) {
                ?>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#<?php echo $state; ?>">
                                <?php echo $state; ?></a>
                        </h4>
                    </div>
                    <div id="<?php echo $state; ?>" class="panel-collapse collapse in">
                        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                            minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                            commodo consequat.</div>
                    </div>
                </div>
            <?php }
            ?>
        </div>
   </div><!-- colse col-md-4 -->
    </div>

Answer 2

您的修改后的代码无法正常工作，因为您在col之前定义了foreach，因此您将所有这些代码整合到一个col中。你应该在col里面有foreach所以它们都是独立包装的。

试试这个：

<div class="panel-group" id="accordion">
<div class="row">
    <?php foreach ($states as &$state) { ?>
        <div class="col-xs-12 col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#<?php echo $state; ?>">
                            <?php echo $state; ?></a>
                    </h4>
                </div>
                <div id="<?php echo $state; ?>" class="panel-collapse collapse in">
                    <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                        commodo consequat.</div>
                </div>
            </div>
        </div><!-- col-md-4 now closes here -->
    <?php } ?>
</div>

在Bootstrap中，div和row

之间的cols是不好的做法

希望这适合你！

Answer 3

如果这是你的答案：

您需要做的就是在面板组之前添加bootstrap列类。

col-xs-12小屏幕尺寸，col-md-4中等屏幕尺寸/ PC， col-lg-12适用于大屏幕尺寸，col-sm-6适用于平板电脑屏幕尺寸。

bootstrap使手风琴响应？

3 个答案: