Question

我尝试使用Bootstrap 3设计一个网站，其中包含一个顶部导航栏和一个按需滑动的左侧导航栏。我不确定我是否应该使用在校外滑动或使用折叠的东西。我尝试使用崩溃，这是我到目前为止所做的：

http://www.bootply.com/kUYl9617Fc

单击“报告” - >“切换报告数据1”以切换幻灯片效果。有些事情是错误的。

从顶部向下滑动。我希望它能从左侧滑入。
我的主要内容在这里＆＃34;文字应该出现在右边，就像Lorem ipsum＆＃39;下面的图片中的内容，而不是幻灯片的内容。理想情况下，我喜欢＆＃34;主要内容在这里＆＃34;向右推，并在页面的其余区域居中。

请注意，我从侧面看到了导航栏中幻灯片的大量示例以及我不仅仅是复制他们的示例的原因，因为幻灯片在内容从上到下填充页面，并推送到顶部导航栏的侧面。我试图避免这种情况。内容中的幻灯片显示低于顶部导航栏，就像在模型中一样非常重要。

最终我想要达到的目标是：

点击顶部的“报告”会打开一个下拉菜单，供用户选择一个类别。这将在左侧的子类别列表中滑动，并推动Lorem ipsum＆＃39;内容向右。模型不准确：它说的是“＃34;本地目录维护＆＃34;我实际上喜欢将其包含在侧边栏中，有点像品牌（并且我会缩小该文字以使其适当）。

提前感谢您的帮助。

编辑：更改了bootply链接以合并SiggyF的更正。我还移动了id =＆＃34; collapseExample＆＃34;从它上面的行div到它下面的<div class="col-sm-3"。

Answer 1

关于你的第一个问题。折叠动画在样式表中为defined。修复了高度属性的动画：

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  @include transition-property(height, visibility);
  @include transition-duration(.35s);
  @include transition-timing-function(ease);
}

如果要更改该动画，可以转换width属性。你如何实现取决于你是否使用sass，less或css版本的bootstrap。

关于你的第二个问题。第36行有一个无序的div。尝试将容器更改为：

<div class="container">
  <div class="row" id="collapseExample">
    <div class="col-sm-3" id="sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#">Overview</a></li>
        <li><a href="#">Data</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
      </ul>
    </div> <!-- there was a div here -->
    <div class="col-sm-6">
      Main content here
    </div> 
    <div class="col-sm-3">
    </div> <!-- and now it's here -->
  </div>
</div><!-- /.container -->

在Bootstrap 3中使用左侧滑入式导航栏的顶部导航栏

1 个答案: