ブートストラップ4アルファ6：折りたたまれた2つのdivが並んで展開されている場合

重要ではないプロジェクトでブートストラップ4アルファ6を試していて、奇妙な動作が起こりました。サイドバイサイドで表示されるはずの折りたたまれたdivは、展開されたときにスタックされます。ここでブートストラップ4アルファ6：折りたたまれた2つのdivが並んで展開されている場合

は（以下、完全な実施例を参照）問題を再現する正確な手順は次のとおりです。

2つのcol-6 divを含むcol-12のdivを作成します。私の例ではピンクとイエローのdivと同様に、2つの狭いdivが並んで座っています。
あなたはdivを展開すると、次の2つのcol-6のdiv要素が並んで表示されていることに注意しましょうdivを上記のリンクを追加し、collapseに（例ではExpandリンクなど）col-12のdiv
をそれを設定分割された1秒間、そして突然、もう一方の上に積み重ねられる。

これはおそらく、ブートストラップ4が最終バージョンに近づくと修正されるばかりのバグだと私は気づいていますが、その間に誰かがこれを修正する提案があるのだろうかと思います。

私はブラウザ開発ツールでCSSをオーバーライドするさまざまな試みをしましたが、左のものの下で右のdivドロップを行っているスタイルの設定がわかりません。代わりにJavaScriptの問題です。あるいは、それは私の醜いHTMLです！

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    </head> 
 

 
    <body class="container" style="margin-top: 40px;"> 
 
    <div class="row col-12"> 
 
     <!-- Title and authors --> 
 
     <h4 class="col"> 
 
     <a href="#details" data-toggle="collapse" aria-expanded="true"> 
 
      <span>Expand</span> 
 
     </a> 
 
     </h4> 
 
    </div> 
 

 
    <div id="details" class="row collapse" aria-expanded="true"> 
 
     <div class="col col-6" style="background-color: lightblue;"> 
 
     <h3>Text on the left</h3> 
 
     <p>Lorem ipsum dolor sit amet, iusto fuisset ea pri.</p> 
 
     </div> 
 

 
     <div class="col col-6" style="background-color: lightgreen;"> 
 
     <h3>Text on the right</h3> 
 
     <p>Cu sed latine tacimates maluisset, nibh.</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="row" aria-expanded="true"> 
 
     <div class="col col-6" style="background-color: lightpink;"> 
 
     <h3>Exact same as collapsed area above but no collapse</h3> 
 
     <p>Lorem ipsum dolor sit amet, iusto fuisset ea pri.</p> 
 
     </div> 
 

 
     <div class="col col-6" style="background-color: lightyellow;"> 
 
     <h3>Text on the bottom right</h3> 
 
     <p>Cu sed latine tacimates maluisset, nibh.</p> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-05-11 Emma Burrows

問題がGitHubの上で、このために開かれていますhttps://github.com/twbs/bootstrap/issues/22600

一方、この問題を回避するには、使用することです。..

.row.collapse.show { 
    display: flex; 
}

http://codeply.com/go/jjHvwkYalf

出典

2017-05-11 11:27:00 ZimSystem

ブリリアント！修正と問題にリンクしてくれてありがとう、私は説明を見てもわかりませんでした。 –

ブートストラップ4アルファ6：折りたたまれた2つのdivが並んで展開されている場合

答えて

関連する問題