Question

我正在使用数据切换=＆＃34;崩溃＆＃34;在boostrap 3中，但在页面加载时，我隐藏的div内容不会保持关闭状态。我搜索了许多解决方案，其中没有一个有效。下面是我的代码，为新手编码道歉，但我自己就业，并且还没有时间流利的html。

<div class="row">
    <div class="container">
        <div class="col-md-12">
            <div class="thumbnail">
                <img src="img/ground/grnd1.jpg" alt="...">
  <div class="caption">

    <p style=" color: dimgray;">text here,text here,text here,text here,text here,</p>
    <p> <a class="btn btn-default" href="#foundations" data-toggle="collapse" data-target="#foundations" style="padding:2%;">Continue Reading &raquo;</a></p>
  </div>

      <div class="container" >
                    <div class="collaspe" id="foundations" data-toggle="false">
                    <br><br>
                <div class="col-md-12 col-sm-12">
                    <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Pad Foundations</h1>
                <br><br>
                    <img src="img/ground/grnd2.jpg" alt="..." style="width:100%;">
                     <p style=" color: dimgray;">text here, text here, text here, text here, </p><br><br>

                     <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Jack Pad Foundations</h1>
                     <img src="img/ground/grnd5.jpg" alt="..."  style="width:100%;">
                     <p style=" color: dimgray;">text here,text here,text   here,text here,</p><br><h2 style="font-weight: 300">Need advice?<a    href="contact_us.html">Contact us</a></h2><br><br>                   
  </div> 
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

提前谢谢

Answer 1

你拼错了＃34;崩溃＆＃34; div的classname为id＆＃34;基础＆＃34;。

<div class="row">
    <div class="container">
        <div class="col-md-12">
            <div class="thumbnail">
                <img src="img/ground/grnd1.jpg" alt="...">
                <div class="caption">

                    <p style=" color: dimgray;">text here,text here,text here,text here,text here,</p>
                    <p> <a class="btn btn-default" href="#foundations" data-toggle="collapse" data-target="#foundations" style="padding:2%;">Continue Reading &raquo;</a>
                    </p>
                </div>

                <div class="container">
                    <div class="collapse" id="foundations" data-toggle="false">
                        <br>
                        <br>
                        <div class="col-md-12 col-sm-12">
                            <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Pad Foundations</h1>
                            <br>
                            <br>
                            <img src="img/ground/grnd2.jpg" alt="..." style="width:100%;">
                            <p style=" color: dimgray;">text here, text here, text here, text here, </p>
                            <br>
                            <br>

                            <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Jack Pad Foundations</h1>
                            <img src="img/ground/grnd5.jpg" alt="..." style="width:100%;">
                            <p style=" color: dimgray;">text here,text here,text here,text here,</p>
                            <br>
                            <h2 style="font-weight: 300">Need advice?<a    href="contact_us.html">Contact us</a></h2>
                            <br>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Boostrap 3，切换塌陷不会在页面加载时保持关闭状态

1 个答案: