2

我正在用 Bootstrap 3.3.6 中的专辑创建一个画廊。专辑由专辑封面组成，可在可折叠的文件中显示或隐藏专辑图片<div>。可折叠<div>也是手风琴风格。

我有 2 个使用媒体查询和 Bootstrap 的 .hidden-* 类的移动和桌面布局。此外，当您单击相册中的一张图片时，它会打开一个轮播以滚动浏览图像。

该代码完美运行，但我希望可折叠部分<div>保持打开状态，尽管布局会随着页面大小的调整而发生变化。现在它在单击时打开，然后当您将屏幕大小调整到超过断点时，它会随着布局随断点的变化而关闭。

我意识到这有点不必要，因为基本上没有人会在桌面上以这种方式调整浏览器的大小，但我仍然想知道该怎么做。想不通。

这是代码示例，您可以看到布局如何从桌面更改为移动设备。

在此处查看实际操作 www.leubasketball.com/gallery

 <div class="panel-group text-center" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="col-sm-12 col-md-12 hidden-xs">
<!--Desktop Gallery------------------------------>

<!--Album Covers--------------------------------->
    <!--Skillcase 2016 Album Cover----------------------->
        <div class="col-sm-3 panel-heading" role="tab" id="skillcase2016">
              <div class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSkillcase2016" aria-expanded="true" aria-controls="collapseSkillcase2016">
                  <h4 style="color:#ffffff">Skillcase 2016</h4>
                    <img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
                </a>
              </div>
        </div>
    <!--St Goerge 2016 Album Cover----------------------->
       <div class="col-sm-3 panel-heading" role="tab" id="stgeorge2016">
          <div class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseStgeorge2016" aria-expanded="false" aria-controls="collapseStgeorge2016">
              <h4 style="color:#ffffff">St. George 2016</h4>
                <img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
            </a>
          </div>
        </div>
        </div>

<!--Albums-------------------------------------------->           
    <!--Skillcase 2016 Album--------------------------->         
        <div id="collapseSkillcase2016" class="panel-collapse collapse" role="tabpanel" aria-labelledby="skillcase2016">
          <div class="panel-body">
            <!--Thumbnails-------->
                <div class="col-sm-12 col-md-12 hidden-xs">
         <!--Carousel Modal here-------------------------------------->
                </div>
          </div>
        </div>
    <!--Skillcase 2016 Album--------------------------->         
        <div id="collapseStgeorge2016" class="panel-collapse collapse" role="tabpanel" aria-labelledby="stgeorge2016">
          <div class="panel-body">
            <!--Thumbnails-------->
                <div class="col-sm-12 col-md-12 hidden-xs">
         <!--Carousel Modal here-------------------------------------->
                </div>
          </div>
        </div>

<!--Mobile Gallery---------------------------------------->

    <!--Mobile Album Covers-------------------------------->            
        <!--Skillcase 2016 Album Cover---------------------->
       <div class="col-xs-6 visible-xs panel-heading" role="tab" id="skillcase2016M">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSkillcase2016M" aria-expanded="false" aria-controls="collapseSkillcase2016M, collapseSkillcase2016">
                  <h4 style="color:#ffffff">Skillcase 2016</h4>
                    <img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
                </a>
            </h4>
        </div>
        <!--St. George 2016 Album Cover------------------->       
       <div class="col-xs-6 visible-xs panel-heading" role="tab" id="stgeorge2016M">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseStgeorge2016M" aria-expanded="false" aria-controls="collapseStgeorge2016M">
                  <h4 style="color:#ffffff">St. George 2016</h4>
                    <img src="img/completeplayerimage.jpg" class="albumCover img-responsive">
                </a>
            </h4>
        </div>
<!--Mobile Albums--------------------------------------->
        <!--Skillcase 2016 Album---------------------------->
        <div id="collapseSkillcase2016M" class="panel-collapse collapse" role="tabpanel" aria-labelledby="skillcase2016M">
          <div class="panel-body">
              <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
          <!--Carousel Modal here------------------------->
              </div>
          </div>
        </div>
        <!--St George 2016 Album---------------------------->
        <div id="collapseStgeorge2016M" class="panel-collapse collapse" role="tabpanel" aria-labelledby="stgeorge2016M">
          <div class="panel-body">
              <div class="col-xs-12 hidden-sm hidden-md hidden-lg">
          <!--Carousel Modal here------------------------->
              </div>
          </div>
        </div>



    </div>
</div>
4

0 回答 0