右パネルページコンテンツを左に移動中に表示/非表示

Question

私は、展開したり折り畳むことができる右側のパネルを持っています。ユーザーが展開オプションをクリックすると、パネルとともに左にスライドするのではなく、本文の内容が下に降ります。

元のコンテンツを左にスライドさせるにはどうすればよいですか？

#panel 
{ 
height: 500px; 
width: 200px; 
background: black; 
float: right; 
display: none;  
color: white; 
font-size: xx-large; 
} 
#click 
{ 
height: 70px; 
width: 25px; 
background: #CB5152; 
float: right; 
margin-top: 200px; 
} 


<div id='panel'> 
Info 
</div> 

<div id='click'> 
<div id="inner" class="fa fa-calculator fa-lg"></div> 
</div> 

<script> 
$('#click').click(function() 
{ 
$("#panel").animate({width:'toggle'},500);  
    }); 
</script> 

FORM

<div class="container"> 
    <div class="site-index"> 
    <div class="body-content"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <form id="wizard_example" action=""> 

BEFORE http://searcherrorcodes.com/stack/before.PNG

AFTER http://searcherrorcodes.com/stack/after.PNG

Answer 1

フォーム（または、それがコンテナの）次に、幅（COL-MD-12）の100％を占めている場合サイドパネルが表示されたときにフォームを左に移動するスペースはありません。フォームを小さくしてページ上に配置する必要があります。サイドパネルを "position：absolute"に設定することもできます（Z-インデックスがフォームのどのセットよりも高いことを確認してください）。しかし、サイドパネルがフォームの上に表示されます。