ブートストラップ4サイドバーCSSの移行が動作しません。

Question

私は、移行を除いてすべて期待どおりに動作するオフカンズのサイドバーを作成しようとしています。コンテンツとサイドバーのメインラッパーとサブラッパーが2つあります。私はコードを追加しました（私はサイドバーをトグルするためにJavaScript toggleClassを使用しました）

HTMLを追加しました。

<div class="main-wrapper d-flex" id="main-wrapper"> 
    <main class="d-flex" id="main-content"> 
     <button type="button" id="slideButton" class="align-self-center order-2"> 
      <i class="fa fa-arrow-left fa-lg" id="slideArrow"></i> 
     </button> 
     <div class="book-wrapper d-flex flex-row flex-wrap"> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/1.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/2.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/3.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/1.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/2.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/3.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/1.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/2.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/3.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/4.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/3.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/1.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/2.png"> 
       </div> 
      </div> 
      <div class="books"> 
       <div class="section-box"> 
        <figure> 
         <h3>اسم الكتاب</h3> 
         <p>معلومات:الوصف بدأ رسم الخرائط بعمل نيكول سانسون، بطريركر الفرنس</p> 
         <a href="#" class="btn btn-read">Read here</a> 
        </figure> 
        <img src="assets/books/3.png"> 
       </div> 
      </div> 
     </div> 
    </main> 
    <div class="p-0" id="sidebar"> 
     <form action="" class="search"> 
      <div class="input-group"> 
       <i class="input-group-addon fa fa-search"></i> 
       <input class="form-control" type="search" placeholder="بحث الكتب" aria-label="Search"> 
      </div> 
     </form> 

     <div id="tree"></div> 

    </div> 
</div> 
     <script> 
     $("#slideButton").click(function (e) { 
      $("#sidebar").toggleClass("collapse"); 
     }); 
     </script> 

CSS

#main-wrapper { 
height: 100vh; 
} 

#main-content { 
.book-wrapper { 
    justify-content: space-between; 
    overflow: auto; 
    height: inherit; 
    padding-bottom: 100px; 
    -ms-overflow-style: none; 
    &::after { 
     content: ""; 
     flex: auto; 
    } 
    .books{ 
     padding: 10px; 
    } 
    .section-box { 
     height: 230px; 
     width: 160px; 
     background: radial-gradient(#6e6e6e, #2f2f2f); 
     background: -webkit-radial-gradient(#6e6e6e, #2f2f2f); 
     background: -moz-radial-gradient(#6e6e6e, #2f2f2f); 
     color: #fff; 
     position: relative; 
     overflow: hidden; 
     margin: 10px 0; 
    } 
    .section-box figure { 
     position: absolute; 
     text-align: right; 
     padding: 10px 19px 19px 19px; 
     width: 100%; 
     height: 100%; 
     border-top: 1px solid #fff; 
     background: rgba(0, 0, 0, 0.71); 
     bottom: -80%; 
     transition: ease-in-out .5s; 
     margin-bottom: 0; 
    } 
    .section-box:hover figure { 
     bottom: 0; 
    } 
    .section-box figure h3 { 
     margin: 0; 
     padding-bottom: 10px; 
    } 
    .section-box img { 
     height: 100%; 
     width: auto; 
    } 
    .btn-read { 
     width: 100%; 
     background: transparent; 
     border-radius: 0; 
     border: 1px solid #ffffff; 
     color: #fff; 
    } 
} 
button i { 
    font-size: 24px; 
    background-color: #e6e4e4; 
} 
} 

#sidebar { 
min-width: 350px; 
max-width: 350px; 
overflow-y: auto; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s ease; 
@include red-gradient(right, 
left); 
.collapse{ 
    margin-right: -350px; 
} 
.search { 
    padding: 15px 10px 0 10px; 
    margin-left: 10%; 
    width: 80%; 
} 
.search i { 
    line-height: 1.5; 
    background: #fff; 
    border-top-left-radius: 15px; 
    border-bottom-left-radius: 15px; 
} 
.search input { 
    border-top-right-radius: 15px; 
    border-bottom-right-radius: 15px; 
    text-align: right; 
    border-left: none; 
    &:focus { 
     border-color: none; 
     box-shadow: none; 
    } 
} 
} 

Answer 1

あなたがトグルしますクラスのスタイルを書いたかSASS、を書いている場合、サイドバーには適用されていません。代わりに、ネストされた#sidebar .collapseの#sidebar.collapseであるためにあなたのCSSを記述する必要があると思います：

[SASSの親セレクタを使用して：https://css-tricks.com/the-sass-ampersand/]

#sidebar { 
    &.collapse { 
     margin-right: -350px; 
    } 
}