由于上面的导航栏内容而移动div

Question

我正在使用Bootstrap在我的页面上制作导航标签。目前我在一个`div中有两个导航栏。他们工作正常。但是，当我通过选项卡进行面板切换时，内容会更改高度，导致其下方的导航栏上下移动。如何阻止这种情况发生？

配置div位于同一div内的Mobile div之上

例如：

  <div>
    <div class="config"></div>
    <div class="mobile" style="position:inherit;"></div>
  <div>

之前

后

另外，您可以看到导航栏线不对齐，因为Mobile行比配置导航栏行短。我该如何调整呢？

Answer 1

不太确定这是否是你要问的问题，但这里有：

阻止内容移动后续div

你有一个容纳div的容器div。您希望两者都显示在容器的上下文中，但您不希望每个人都移动另一个容器的位置。

以下是您的表现方式：

＆＃13;

＆＃13;

.container {
  height: 450px;
  width: 100%;
}
.container div {
  height: 50%;
  overflow: auto;
}

＆＃13;

<div class="container">
  <div class="content-panel-1" style="background-color:blue; color:white;">
    <ul>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
    </ul>
  </div>
  <div class="content-panel-2" style="background-color:red; color:white;">
    <ul>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
    </ul>
  </div>
</div> 

＆＃13;

＆＃13;

＆＃13;

作为旁注：

如果你想帮助你的对齐，那么这一点CSS应该会极大地改善你的列表布局：

 ul {
   padding: 0;
   margin: 0;
   list-style: none;
 }