부트 스트랩이있는 확장 가능한 divs

내 HTML의 구조로 인해 하나의 div가 확장되면 전체 행이 아래로 이동하는 문제가 있습니다. 이 문제를 해결하는 데 어려움을 겪고 있습니다. 나는 여기를 보았지만 결의안을 찾지 못했습니다. 어떤 아이디어라도 좋을 것입니다. 이것은 내 구조 (DIV 1은 문제의 본질을 표시하도록 확장 포함) : 당신은 내가이 작업을 수행하는 것이 좋습니다 부트 스트랩 붕괴를 사용하지 않으 언급 한 바와 같이부트 스트랩이있는 확장 가능한 divs

expandable div 1 | expandable div 2 
        | 
        | expandable div 4 
        | 
expandable div 3 |

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-6"> 
     <div class="panel panel-primary"> 
      expandable div 1 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-6"> 
     <div class="panel"> 
      expandable div 2 
     </div> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-xs-12 col-sm-6"> 
     <div class="panel"> 
      expandable div 3 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-6"> 
     <div class="panel"> 
      expandable div 4 
     </div> 
    </div> 
    </div> 
</div>

출처

2017-11-24 justanotherrrr

어떻게 확장 하시겠습니까? 펼쳐진 div가 아래 div를 겹쳐 지도록 하시겠습니까? – Eddie

이상적으로 나는 내용을 그에 따라 아래로 이동하고 싶습니다. 하나의 열에 있다면, 다른 열에 영향을 미치지 않을까요? 그게 의미가 있다면;) – justanotherrrr

@ justanotherrrr 어쩌면 당신이 어떻게 보이고 싶지 추가 할 수 있습니까? –

jQuery (예제는 아래 참조). 귀하의 HTML

: 지금 jQuery

<div class="container"> 
    <div class="header"><span>Expand</span> 

    </div> 
    <div class="content" style="display: none;"padding : 10px;> 
     Suprise! 
    </div> 
</div>

이 같은

$(".header").click(function() { 

    $header = $(this); 

    $content = $header.next(); 

    $content.slideToggle(300, function() { 

     $header.text(function() {    
      return $content.is(":visible") ? "Collapse" : "Expand"; 
     }); 
    }); 

});

뭔가가 작동합니다.

스타일 디스플레이로 CSS을 고려하십시오.

출처

2017-11-24 09:32:58

부트 스트랩이있는 확장 가능한 divs

답변

관련 문제