Question

呈现包含以下代码的页面时，该项目以扩展模式显示。如何强制将其关闭？

<div class="container">
<div class="row">
<div class="col">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card 
   zz_txtblue zz_txt_Bold bg-warning"
   >
   <h6 class="card-header" role="tab" id="A11">
      <a 
         data-toggle="collapse" 
         data-parent="#accordion" 
         href="#collapseOneA11" 
         aria-expanded="false" 
         aria-controls="collapseOneA11" 
         class="d-block">
      <i class="fa fa-chevron-down pull-right"></i> 
      Collapsible Group Item #1
      </a>
   </h6>
   <div id="collapseOneA11" class="collapse show" role="tabpanel" aria-labelledby="A11">
      <div class="card-body">
         some text
      </div>
   </div>
</div>

Answer 1

从show元素中删除collapse类。

      <div class="card zz_txtblue zz_txt_Bold bg-warning">
               <h6 class="card-header" role="tab" id="A11">
                          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOneA11" aria-expanded="false" aria-controls="collapseOneA11" class="d-block">
                          <i class="fa fa-chevron-down pull-right"></i> 
                          Collapsible Group Item #1
                          </a>
               </h6>
               <div id="collapseOneA11" class="collapse" role="tabpanel" aria-labelledby="A11">
                      <div class="card-body">
                          some text
                      </div>
               </div>
      </div>

https://www.codeply.com/go/peokOBkvwh

如何使用Bootstrap 4在卡中强制以折叠模式渲染项目

1 个答案: