Question

我正在使用可折叠的侧边栏来打开和关闭嵌套项目，点击它们就可以了。问题是，当点击菜单项时，它也会关闭页面的其他部分。

如您所见，点击左侧菜单site，所有正确的部分也会下降。

这是布局：

<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>

Answer 1

这是由于您使用了align-self-center类。删除该课程，您的主要内容将保留。

了解更多有关align-self的信息。

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

Answer 2

删除对齐自我中心类，这会导致项目在中心垂直对齐

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

Answer 3

我检查你的代码，问题是在包含菜单的那个之后的div：

＆＃13;

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

＆＃13;

你需要像这样包装align-self-center：

＆＃13;

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

＆＃13;

这就是你所需要的，希望我能帮助

Bootstrap可折叠栏的副作用

3 个答案: