相关疑难解决方法(0)

试图实现这样的目标:https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html

我在网上看过一些使用其他版本的bootstrap的例子,但它们都过多地改变了css,这使得学习bootstrap变得更加困难.

我想知道在Bootstrap 4中是否可以使用折叠,堆叠药丸,flexbox等工具来完成这项工作？

这是我可以实现的:https://jsfiddle.net/kL9u6esw/20/

我的Jsfiddle缺少什么:

1. 没有正确回应
2. 导航栏未使用粘性类正确滚动
3. 即使我设置了类,菜单按钮也不粘.
4. 背景调光器虽然不是答案所必需的,但会很棒

在我的例子中,我无法弄清楚如何插入导航栏,不确定它是否有必要正确响应.

还不确定将它作为列是否是正确的方法,它不应该是在画布外吗？

Html代码:

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample">
      <ul class="nav flex-column navbar-dark sticky-top">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <div class="row">
        <div class="col-12">
          <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
            Menu …

我有两列布局,如下所示:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
    </div>
 </div>

如果我设置position:sticky到侧边栏列,我会得到侧边栏的粘性行为:https://codepen.io/marcanuy/pen/YWYZEp

CSS:

.sticky {
  position: sticky;
  top: 10px;
}

HTML:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4 sticky">
    </div>
 </div>

但是当我将sticky属性设置为仅位于侧边栏中的菜单时,相关文章部分正常滚动并获得菜单div的粘滞行为,它不起作用:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
       <div class="menu sticky">
       </div>
    </div>
 </div>

这是第一个使用粘性行为滚动整个侧边栏的示例的截屏视图,然后将sticky属性更改为不起作用的菜单:

Bootstrap 4 推荐使用sticky属性作为对Affix jQuery插件的删除支持:

删掉了Affix jQuery插件.我们建议使用位置:粘性polyfill.

我测试过:

• Firefox 47.0 css.sticky.enabled=“true”以下about:config …

我正在使用Angular 4,Bootstrap 4并尝试实现固定的可滚动右div和固定的左div.它应该与Trulia非常相似.

Bootstrap在版本4中删除了Affix jQuery插件,所以这个方法不再有效,他们建议使用position:sticky,但我无法让它工作.

请帮忙!

的index.html

<div class="container-fluid">
  <div class="row h-100">
    <div class="col-md-6">
      <div id="left-container">
        <div class="search-property">
          <input type="text">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div id="right-container">
        <app-home-right></app-home-right>
      </div>
    </div>  
  </div>
</div>

style.css文件

#left-container {
  height: 100%;

  position: fixed;
  width: inherit; 
}

#right-container {
  position: absolute;
}

.search-property {
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
  margin-left: 50%;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.border {
  border: 1px solid black;
}

花了好几个小时试图弄清楚这个问题，看起来它应该如此简单。网页有点复杂，但问题归结为这个。

我正在尝试在左侧创建一个包含菜单的弹性框，然后在右侧创建一个“内容”，我希望左侧保持静止，右侧则上下滚动。但是，目前我只能让它垂直滚动。

于是采取了以下步骤

创建了“视图”框

<div class="container-fluid">

    <div class="row d-none d-md-block flex-nowrap wrapper boxtoview">

所以这应该给我一个大盒子来填满整个页面

然后是一个左列

<div class="col-md-4 float-left navstyle" id="sidebar">

然后右列

        <main class="col col-md-8 float-left col px-5 pl-md-2 pt-2 main mainview">

无论我在右栏中放什么，它都拒绝滚动。奇怪的是，左手会滚动

当我从阅读大量的职位的理解，我应该把滚动的页面，然后告诉具体的div是要滚动作为一列，但它似乎非常不高兴这样做。这是CSS

body {
  background: #ffffff;
  font-family: "Montserrat", sans-serif;
  height: 100%;
  overflow: hidden;
  /*makes the body non-scrollable (we will add scrolling to the sidebar and main content containers)*/
  margin: 0px;
  /*removes default style*/
  display: flex;
  /*enables flex content for its children*/ }

.navstyle {

  font-family: "Cinzel", serif;
  height: 100vh; …