BOOTSTRAP 打开时崩塌切成两半

Question

这是什么原因造成的？

https://gfycat.com/SmugFelineGnatcatcher

这是使用的HTML。

编辑：添加完整 HTML

<div class='scommessa-con'>
<div class='nome-squadra'>
   <p class='text orario' style='width:200px;margin-bottom:-16px;'>" . $row['DateTime'] . " </p>
   <p class='text float-xl-left h4 pt-3' style='width: 350px;' id='nome-squadra'>" . $row['NomeSquadra'] . "</p>
</div>
<div class='quoteCon container'>
   <div class='row flex-row flex-nowrap esito '>
      <div class='text-center ' style='width: 59px;'>1</div>
      <div class='text-center ' style='width: 59px;'>X</div>
      <div class='text-center ' style='width: 59px;'>2</div>
      <div class='text-center  ' style='width: 59px;'>U2.5</div>
      <div class='text-center  ' style='width: 59px;'>O2.5</div>
      <div class='text-center d-none d-sm-block' style='width:59px;'>GOL</div>
      <div class='text-center d-none d-sm-block' style='width:59px;'>NO GOL</div>
      <div class='text-center ' style='width:59px;'></div>
   </div>
   <div class='row flex-row flex-nowrap quota' id='" . $row['NomeSquadra'] . "'>
   <div class='text-center border border-rounded-0  ' style='width: 59px;' id='1'>
      ". $row['1'] . "
   </div>
   <div class='text-center border align-middle' style='width: 59px;' id='X'>
      " . $row['X'] . "
   </div>
   <div class='text-center border ' style='width: 59px;' id='2'>
      " . $row['2'] . "
   </div>
   <div class='text-center border ' style='width: 59px;' id='U2.5'>
      " . $row['U25'] . "
   </div>
   <div class='text-center border  ' style='width: 59px;' id='O2.5'>
      " . $row['O25'] . "
   </div>
   <div class='text-center border    d-none d-sm-block' style='width:59px;' id='GOL'> " . $row['GOL'] . "</div>
   <div class='text-center  border d-none d-sm-block' style='width:59px;' id='NO GOL'> " . $row['NOGOL'] . "</div>
   <div class='text-center border  ' data-toggle='collapse' data-target='#quote" . $counter . "'  id='more' style='width: 59px;'>MORE</div>
</div>
<div class='' style=''>
<div>
<div id='quote" . $counter . "' class='collapse-div collapse ' role='tablist'>
   <div class='collapse-header mt-3 ' id='heading1'>
      <button id='button' class='bottoni mb-2 btn-block ' data-toggle='collapse' data-target='#collapse1" . $counter . "' aria-expanded='true' aria-controls='collapse1'>
      <i class='fas fa-chevron-down float-right' style='height: 15px'></i> <strong
         class=' pl-2'>Under / Over </strong>
      </button>
   </div>
   <div id='collapse1" . $counter . "' class='collapse scrolling-wrapper-flexbox  pl-2 pr-2' role='tabpanel' aria-labelledby='heading1'>
      <div class='collapse-body ml-1 '>
         <div class='row flex-row flex-nowrap mt-2 esito '>
            <div class='text-center border-left border-bottom' style='width: 59px;'>U0.5
            </div>
            <div class='text-center border-left border-bottom' style='width: 59px;'>U1.5
            </div>
            <div class='text-center border-left border-bottom' style='width: 59px;'>U3.5
            </div>
            <div class='text-center border-left border-bottom' style='width: 59px;'>O0.5
            </div>
            <div class='text-center border-left border-bottom' style='width: 59px;'>O1.5
            </div>
            <div class='text-center border-left border-bottom' style='width: 59px;'>O3.5
            </div>
         </div>
         <div class='row flex-row flex-nowrap quota' id='". $row['NomeSquadra'] . "'>
         <div class='text-center' style='width: 59px;' id='U0.5'>
            " . $row['U05'] . "
         </div>
         <div class='text-center' style='width: 59px;' id='U1.5'>
            " . $row['U15'] . "
         </div>
         <div class='text-center' style='width: 59px;' id='U3.5'>
            " . $row['U35'] . "
         </div>
         <div class='text-center' style='width: 59px;' id='O0.5'>
            " . $row['O05'] . "
         </div>
         <div class='text-center' style='width: 59px;' id='O1.5'>
            " . $row['O15'] . "
         </div>
         <div class='text-center' style='width: 59px;' id='O3.5'>
            " . $row['O35'] . "
         </div>
      </div>
   </div>
</div>

这是唯一使用的 CSS，如果我没记错的话，还有其他类但主要用于 Javascript 交互。

.bottoni {
                border-style: solid !important;
                border-width: 1px !important;
                background-color: #e6e6e6 !important;
                border-color: #b5b5b5;
                text-align: left !important;
                color:black;
            }

  #more {
                background-color: black;
                color: white;
                font-size: 14x;
                vertical-align: baseline;
            }

  .esito {
                color: #9a9796;
                font-size: 13px;
                font-weight: 400;
            }

            .quota {
                font-size: 15px;
                color: black;
                font-weight: 600;
                cursor: pointer;
                text-align: center;
                font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
                height: 26px;
            }

    @media (max-width: 576px) {
                #tests {
                    text-align: center;
                    margin-left: 20%;
                    width: auto;
                }

            }

            @media (min-width:1025px){
                 .orario{
                    padding-left:18px;
                 }
                 #nome-squadra{
                      margin-left:18px;
                 }
            }
            @media (min-width:577px) {
                #button {
                    width: 100%;
                    text-align: center;
                }
            }

当我做了一些更改然后消失时，我看到这个问题又回来了。我相信它可能与宽度或高度有关？还是padding/margin问题？

顺便说一下，对于乱七八糟的代码，我很抱歉，我是 web 开发的新手，只有 1-2 个月

Answer 1

这似乎是填充问题。因为当折叠打开时它没有在第一阶段调整它的填充。检查您的样式中的填充，看看这是否解决了您的问题。

BOOTSTRAP 打开时崩塌切成两半

BOOTSTRAP collapse when opened cuts in half

html

css

collapse

bootstrap-4