在移动视图bootstrap3上制作手风琴

Question

在我的应用中，内容太多。在评论部分有很多评论，我需要在移动视图中将 div 制作成手风琴。我该怎么做？

<div class="col-xs-12">
    <h1> Heading </h1> 
    <div class="col-md-10 col-xs-12 center-margin float-none no-padding">
        <div class="padding-left-30">   
            <span class="pacifico pull-left padding-right-15" style="font-size:30px;">This is the best Color ever!</span>
        </div>
        <div class="padding-left-30 padding-top-15 quote">
            <P class="padding-top-15">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, explicabo? Vero voluptate harum explicabo possimus facilis aliquam iusto voluptatibus eos aspernatur ducimus velit, est. Non quos ab perspiciatis nobis possimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam cum officia quae voluptatem voluptates illo mollitia velit consequatur rerum error molestiae maiores, iusto ab natus excepturi animi alias, quam sit?</P>
        </div>
        <div class="padding-right-15-per padding-top-15">
            <p class="pull-right text-bold">Basheer Shahul</p>
        </div>
    </div>
    <div class="col-md-10 col-xs-12 center-margin float-none no-padding">
        <div class="padding-left-30">   
            <span class="pacifico pull-left padding-right-15" style="font-size:30px;">This is the best Color ever!</span>
        </div>
    </div>

在系统视图中它应该像内容一样显示，在移动视图中它应该将其更改为手风琴。

此视图内容上的 col-xs 和 col-sm 应更改为 Accordion。

Answer 1

如果您使用的是引导程序，您是否尝试按照该示例进行操作？

http://getbootstrap.com/javascript/#collapse-example-accordion

您只需要在正确的位置添加类（折叠时的“in”表示他默认打开），这是您的代码的 jsfiddle 示例：

https://jsfiddle.net/DTcHh/6389/

<div class="col-xs-12 panel panel-default">
    <div class="panel-heading" role="tab" id="headingZero">
        <h1 calss="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseZero" aria-expanded="true" aria-controls="collapseZero">
            Heading
            </a>
        </h1>
    </div>
    <div class="col-md-10 col-xs-12 center-margin float-none no-padding panel-collapse collapse in"  id="collapseZero" role="tabpanel" aria-labelledby="headingZero">
      <div class="panel-body">
        <div class="padding-left-30">   
            <span class="pacifico pull-left padding-right-15" style="font-size:30px;">This is the best Color ever!</span>
        </div>
        <div class="padding-left-30 padding-top-15 quote">
            <P class="padding-top-15">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, explicabo? Vero voluptate harum explicabo possimus facilis aliquam iusto voluptatibus eos aspernatur ducimus velit, est. Non quos ab perspiciatis nobis possimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam cum officia quae voluptatem voluptates illo mollitia velit consequatur rerum error molestiae maiores, iusto ab natus excepturi animi alias, quam sit?</P>
        </div>
        <div class="padding-right-15-per padding-top-15">
            <p class="pull-right text-bold">Basheer Shahul</p>
        </div>
      </div>
    </div>
</div>