简体   繁体   中英

Bootstrap collapsable bar side effect

I am using a collapsable sidebar that open and close nested items clicking on them and it is fine. The problem is that it also bring down the other part of the page when clicking on the menu items.

As you can see clicking on the left menu site all the right part goes down too.

This is the layout:

<body>

<?php $this->view('header'); ?>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <?=$left?> <!-- HERE is the left menu-->
    </div>
    <div class="col-sm-6 align-self-center">
      <?=$main_content?>
    </div>
    <div class="col-sm-3" id="right">
      <?=$right?>      
    </div>
  </div>

<div id ="bottom" class="fixed-bottom"> <?=$footer?> </div>

It is due to your use of the align-self-center class. Remove that class and your main content will stay put.

Learn more about align-self here.

https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

Remove your align-self center class, that is causing the items to align vertically at the center

<div class="col-sm-6 ">
                    <h1>Willkommen bei medica Ärztebedarf</h1>

I inspect your code and the problem is the div that is after the one that contains the menu:

 <div class="col-sm-3"> ...menu </div> <div class="col-sm-6 align-self-center"> ....content </div> 

you need to wrap the align-self-center like this:

 <div class="col-sm-3"> ...menu </div> <div class="col-sm-6"> <div class="align-self-center"> ....content </div> </div> 

This all you need, hope I help

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM