引导崩溃问题

我正在本网站http://zag-test.nowcommu.myhostpoint.ch/website/miete.html 引导崩溃问题

上你可以看到我使用“引导崩溃”隐藏和显示在中间的4个表。但是现在我遇到了一个问题：当我点击第二个按钮（例如EDI 40）时，第一个表格也会自动崩溃（请参阅屏幕1）我该如何解决？

这是HTML和CSS代码

HTML

<div class="row"> 

       <!-- SINGLE TEXT --> 
      <div class="col-sm-12"> 
       <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".6s"> 
        <div class="service-title"> 
        </div> 
        <div class="service-content"> 
         <h3>Warum Mietdampfanlagen</h3> 
         <p>Sie kommen in einen Engpass, weil Ihre Dampfanlage nicht verfügbar ist (Unfall, Revision etc.) oder nicht genügend Kapazität hat! 
          Wir können Ihnen helfen dieses Manko zu überbrücken mit unseren mobilen, modularen Dampferzeugern. Rufen Sie uns an, wir sind für Sie da!</p> 
        </div> 
       </div> 
      </div> 
      <!-- END SINGLE TEXT --> 

     <!-- Columns Tabelle --> 
     <div class="col-md-6"> 
     <button class="btn" data-toggle="collapse" data-target="#table1" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #fadf3e; color:#000;">Stritzel PS 200-15</button> 
     <div id="table1" class="collapse"> 
     <table class="table table-striped table-bordered table-hover" width="744"> 
        <thead> 
        <tr> 

        <th>Kriterium</th> 
        <th>Einheit</th> 
        <th>Grösse</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr> 
        <td>Dampfleistung</td> 
        <td>kg/h</td> 
        <td>21</td> 
        </tr> 
        <tr> 
        <td>Abmessung (lxbxh)</td> 
        <td>mm</td> 
        <td>1'020 x 600 x 1'370</td> 
        </tr> 
        <tr> 
        <td>Gewicht</td> 
        <td>kg</td> 
        <td>140</td> 
        </tr> 
        <tr class=""> 
        <td>Medium</td> 
        <td>-</td> 
        <td>Sattdampf</td> 
        </tr> 
        <tr class=""> 
        <td>Ansprechdruck SV</td> 
        <td>bar</td> 
        <td>6,0</td> 
        </tr> 
        <tr class=""> 
        <td>Einstellbereich Kessel</td> 
        <td>bar</td> 
        <td>1,0 - 5,0</td> 
        </tr> 
        <tr class=""> 
        <td>max. Betriebsdruck</td> 
        <td>bar</td> 
        <td>5,0</td> 
        </tr> 
        <td>Fabr. Nr. </td> 
        <td>-</td> 
        <td>21.301.112/05-09</td> 
        </tr> 
        <td>Gesamtanschluss</td> 
        <td>kW</td> 
        <td>elektrisch, 15 kW</td> 
        </tr> 
        <td>Stromanschluss</td> 
        <td>A/V</td> 
        <td>CEE 32A, 5-polig/400 V</td> 
        </tr> 
        <td>Wasserenthärtung</td> 
        <td>-</td> 
        <td>separat mietbar</td> 
        </tr> 
        <td>Frostschutzsicherung</td> 
        <td>-</td> 
        <td>keine</td> 
        </tr> 
        <td>Mobilität</td> 
        <td>-</td> 
        <td>fahrbar</td> 
        </tr> 
        <td>Flexible Anschlussleitungen</td> 
        <td>-</td> 
        <td>nach Bedarf</td> 
        </tr> 
        <td>Wasseranschluss</td> 
        <td>Zoll</td> 
        <td>R 1/2"/AG</td> 
        </tr> 
        <td>Abwasseranschluss</td> 
        <td>Zoll</td> 
        <td>R 1/2"/IG</td> 
        </tr> 
        <td>Dampfanschluss</td> 
        <td>Zoll</td> 
        <td>3/4"/IG</td> 
        </tr> 
        </tbody> 
        </table></div> 
      </div> 
      <div class="col-md-6"> 
     <button class="btn" data-toggle="collapse" data-target="#table2" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #fadf3e; color:#000;">EDI 40</button> 
     <div id="table2" class="collapse"> 
     <table class="table table-striped table-bordered table-hover" width="744"> 
        <thead> 
        <tr> 

        <th>Kriterium</th> 
        <th>Einheit</th> 
        <th>Grösse</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr> 
        <td>Dampfleistung</td> 
        <td>kg/h</td> 
        <td>57</td> 
        </tr> 
        <tr> 
        <td>Abmessung (lxbxh)</td> 
        <td>mm</td> 
        <td>1'205 x 660 x 1'425</td> 
        </tr> 
        <tr> 
        <td>Gewicht</td> 
        <td>kg</td> 
        <td>200</td> 
        </tr> 
        <tr class=""> 
        <td>Medium</td> 
        <td>-</td> 
        <td>Sattdampf</td> 
        </tr> 
        <tr class=""> 
        <td>Ansprechdruck SV</td> 
        <td>bar</td> 
        <td>13,0</td> 
        </tr> 
        <tr class=""> 
        <td>Einstellbereich Kessel</td> 
        <td>bar</td> 
        <td>1,0 - 12,5</td> 
        </tr> 
        <tr class=""> 
        <td>Gesamtanschluss</td> 
        <td>kW</td> 
        <td>elektrisch, 40 kW</td> 
        </tr> 
        <td>Stromanschluss</td> 
        <td>A/V</td> 
        <td>CEE 63A, 5-polig/400 V</td> 
        </tr> 
        <td>Wasserenthärtung</td> 
        <td>-</td> 
        <td>separat mietbar</td> 
        </tr> 
        <td>Frostschutzsicherung</td> 
        <td>-</td> 
        <td>keine</td> 
        </tr> 
        <td>Mobilität</td> 
        <td>-</td> 
        <td>fahrbar</td> 
        </tr> 
        <td>Flexible Anschlussleitungen</td> 
        <td>-</td> 
        <td>nach Bedarf</td> 
        </tr> 
        <td>Wasseranschluss</td> 
        <td>Zoll</td> 
        <td>R 1/2"/AG</td> 
        </tr> 
        <td>Dampfanschluss</td> 
        <td>Flanschen DN/PN</td> 
        <td>20/16</td> 
        </tr> 
        <td>Abwasseranschluss</td> 
        <td>Zoll</td> 
        <td>R 1/2"/IG</td> 
        </tr> 
        <td>Kondensatanschluss</td> 
        <td>Zoll</td> 
        <td>R 3/4"/AG</td> 
        </tr> 
        <td>Entlüfungsleitung</td> 
        <td>Zoll</td> 
        <td>R 1"/AG</td> 
        </tr> 
        </tbody> 
        </table></div> 
      </div> 

      <div class="col-md-6"> 
     <button class="btn" data-toggle="collapse" data-target="#table3" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #000; color:#fadf3e;">PTS 21.200.15</button> 
     <div id="table3" class="collapse"> 
     <table class="table table-striped table-bordered table-hover" width="744"> 
        <thead> 
        <tr> 
        <th>Kriterium</th> 
        <th>Einheit</th> 
        <th>Grösse</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr> 
        <td>Dampfleistung</td> 
        <td>kg/h</td> 
        <td>21</td> 
        </tr> 
        <tr> 
        <td>Abmessung (lxbxh)</td> 
        <td>mm</td> 
        <td>1'020 x 600 x 1'370</td> 
        </tr> 
        <tr> 
        <td>Gewicht</td> 
        <td>kg</td> 
        <td>140</td> 
        </tr> 
        <tr class=""> 
        <td>Medium</td> 
        <td>-</td> 
        <td>Sattdampf</td> 
        </tr> 
        <tr class=""> 
        <td>Ansprechdruck SV</td> 
        <td>bar</td> 
        <td>6,0</td> 
        </tr> 
        <tr class=""> 
        <td>Einstellbereich Kessel</td> 
        <td>bar</td> 
        <td>1,0 - 5,0</td> 
        </tr> 
        <tr class=""> 
        <td>max. Betriebsdruck</td> 
        <td>bar</td> 
        <td>5,0</td> 
        </tr> 
        <td>Fabr. Nr. </td> 
        <td>-</td> 
        <td>21.301.112/05-09</td> 
        </tr> 
        <td>Gesamtanschluss</td> 
        <td>kW</td> 
        <td>elektrisch, 15 kW</td> 
        </tr> 
        <td>Stromanschluss</td> 
        <td>A/V</td> 
        <td>CEE 32A, 5-polig/400 V</td> 
        </tr> 
        <td>Wasserenthärtung</td> 
        <td>-</td> 
        <td>separat mietbar</td> 
        </tr> 
        <td>Frostschutzsicherung</td> 
        <td>-</td> 
        <td>keine</td> 
        </tr> 
        <td>Mobilität</td> 
        <td>-</td> 
        <td>fahrbar</td> 
        </tr> 
        <td>Flexible Anschlussleitungen</td> 
        <td>-</td> 
        <td>nach Bedarf</td> 
        </tr> 
        <td>Wasseranschluss</td> 
        <td>Zoll</td> 
        <td>R 1/2"/AG</td> 
        </tr> 
        <td>Abwasseranschluss</td> 
        <td>Zoll</td> 
        <td>R 1/2"/IG</td> 
        </tr> 
        <td>Dampfanschluss</td> 
        <td>Zoll</td> 
        <td>3/4"/IG</td> 
        </tr> 
        </tbody> 
        </table></div> 
      </div> 

      <div class="col-md-6"> 
     <button class="btn" data-toggle="collapse" data-target="#table4" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #000; color:#fadf3e;">Container ZAG 881/882</button> 
     <div id="table4" class="collapse"> 
     <table class="table table-striped table-bordered table-hover" width="744"> 
        <thead> 
        <tr> 
        <th>Kriterium</th> 
        <th>Einheit</th> 
        <th>Grösse</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr> 
        <td>Dampfleistung</td> 
        <td>kg/h</td> 
        <td>560</td> 
        </tr> 
        <tr> 
        <td>Abmessung (lxbxh)</td> 
        <td>mm</td> 
        <td>3'300 x 2'450 x 2'700</td> 
        </tr> 
        <tr> 
        <td>Gewicht</td> 
        <td>kg</td> 
        <td>ca. 4'000</td> 
        </tr> 
        <tr class=""> 
        <td>Medium</td> 
        <td>-</td> 
        <td>Sattdampf</td> 
        </tr> 
        <tr class=""> 
        <td>Ansprechdruck SV</td> 
        <td>bar</td> 
        <td>13,0</td> 
        </tr> 
        <tr class=""> 
        <td>Einstellbereich Kessel</td> 
        <td>bar</td> 
        <td>4,0 - 10.0</td> 
        </tr> 
        <tr class=""> 
        <td>max. Betriebsdruck</td> 
        <td>bar</td> 
        <td>11,0</td> 
        </tr> 
        <td>Feuerung</td> 
        <td>-</td> 
        <td>Heizöl extraleicht</td> 
        </tr> 
        <td>Wasserenthärtung</td> 
        <td>-</td> 
        <td>Doppelpendel-Anlage</td> 
        </tr> 
        <td>Kapazität Wasserenthärtung</td> 
        <td>m3/°d</td> 
        <td>120,0</td> 
        </tr> 
        <td>Frostschutzeinrichtung</td> 
        <td>-</td> 
        <td>ja</td> 
        </tr> 
        <td>Fernüberwachung</td> 
        <td>-</td> 
        <td>optional</td> 
        </tr> 
        <td>Stromanschluss</td> 
        <td>A/V</td> 
        <td>CEE 32 A, 5 -polig/ 400 V</td> 
        </tr> 
        <td>Kaminanlage</td> 
        <td>-</td> 
        <td>Edelstahlkamin</td> 
        </tr> 
        <td>Kaminlänge</td> 
        <td>m</td> 
        <td>6,0</td> 
        </tr> 
        <td>Flexible Anschlussleitungen</td> 
        <td>-</td> 
        <td>nach Bedarf</td> 
        </tr> 
        <td>Wasseranschluss</td> 
        <td>Zoll/IG</td> 
        <td>1/2 " ; Aussengewinde</td> 
        </tr> 
        <td>Abwasseranschluss</td> 
        <td>Zoll/IG</td> 
        <td>1/2 " ; Aussengewinde</td> 
        </tr> 
        <td>Dampfanschluss</td> 
        <td>Flansch/DN</td> 
        <td>DN 50/PN 16</td> 
        </tr> 
        <td>Kondensatanschluss</td> 
        <td>Flansch/DN</td> 
        <td>DN 32/PN 16</td> 
        </tr> 
        <td>Ölanschluss</td> 
        <td>mm</td> 
        <td>10 mm Kupferleitung</td> 
        </tr> 
        </tbody> 
        </table></div> 
      </div> 
      <!-- END Columns Tabelle --> 

     </div> 
     <!--.row-->

来源

2015-09-25 NOW_Antonio

是问题仍然存在？因为我无法在您的网站上重现它... – Alberto

添加ID到你的第一个.row，并使用该ID在data-parent属性上用于指定其父项的按钮：

<div class="row" id="tableParent"> 
    ... 
    <button class="btn" data-parent="tableParent" data-toggle="collapse" data-target="#table1" class="table1" style="margin-bottom: 20px; width: 100% !important; background: #fadf3e; color:#000;">Stritzel PS 200-15</button> 
    ...

来源

2015-09-25 12:40:18

您可能还想在自己的行中包含前两列 –

我已尝试但没有任何操作...：/ –

请检查此处的引导程序折叠文档： [Bootstrap JS折叠参考]（http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp） –

应用float：right;属性为第二个表（EDI 40）

<div class="col-md-6 table2"></div>

CSS：

.table2{ 
    float:right !important; 
}

来源

2015-09-25 13:22:50

@NOW_Antonio，这是完美的工作 –

引导崩溃问题

回答

相关问题