0
중요하지 않은 프로젝트에서 부트 스트랩 4 알파 6을 실험하고 이상한 행동을 보입니다. 나란히 표시되어야하는 축소 된 div는 펼칠 때 누적됩니다.부트 스트랩 4 알파 6 : 두 div가 나란히 펼쳐진 상태로 펼쳐진 경우
- 두
col-6된 div를 포함하는col-12사업부 만들기 : 여기 (아래 전체 작업 예제 참조) 문제를 재현하기위한 정확한 단계입니다. 나의 예에서 핑크색과 노란색 div와 마찬가지로, 두 개의 좁은 divs 나란히 앉아 것입니다. 당신이 된 div를 확장하면 - 당신은 두
col-6된 div가 나란히 표시됩니다주의 것 (예에서Expand링크 등) - 을
col-12사업부를 div의 위의 링크를 추가하고collapse로 설정 쪼개지는 순간, 그리고 갑자기 다른 하나의 위에 쌓아 올려지게됩니다.
나는 이것이 아마 부트 스트랩 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>
브릴리언트! 고침과 문제점에 대한 링크를 주셔서 대단히 감사합니다. 설명을 볼 때 찾을 수 없었습니다. –