Bootstrap коллапс вопрос

я работаю на этом сайте http://zag-test.nowcommu.myhostpoint.ch/website/miete.html Bootstrap коллапс вопрос

Как вы можете видеть, я использую «коллапс Bootstrap», чтобы скрыть и показать 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

добавить идентификатор к вашему первому .row и использовать этот идентификатор в 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 Collapse Reference] (http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp) –

Применить float: right; недвижимость за 2-й таблицы (EDI 40)

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

CSS:

.table2{ 
    float:right !important; 
}

источник

2015-09-25 13:22:50

@NOW_Antonio, это отлично работает –

Bootstrap коллапс вопрос

ответ

Смежные вопросы