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

如果您使用的是bootstrap，请尝试遵循该示例吗？

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

你需要的只是添加在正确的地方添加课程（＆＃34;在＆＃34;崩溃意味着他默认打开），这里是你的代码的一个例子： / p>

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>

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

1 个答案: