相关疑难解决方法(0)

是否可以使用Twitter Bootstrap(http)创建2列布局(固定 - 流体)布局(http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/) ://twitter.github.com/bootstrap/)？

你有什么解决办法？

我正在尝试使用Bootstrap 4创建一个类似于屏幕截图的布局,但是我在修复侧边栏并同时实现此布局时遇到了一些问题.

以一个基本的例子为例:

<div class="container">
  <div class="row">
    <div class="col-m-4" id="sticky-sidebar">
      Sidebar
    </div>
    <div class="col-m-8" id="main">
      Main Area
    </div>
  </div>
</div>

我可以获得这种布局,但是一旦我声明,事情变得棘手:

.sidebar {
position: fixed // or absolute
}

一旦我使侧边栏变粘,主 div开始出现在侧边栏后面而不是旁边.当然,可以宣布一些余量并将其推回原来的位置,但这会使响应性变得复杂.

我觉得我错过了什么,我读了Bootstrap 4文档,但我找不到一种简单的方法来实现这种布局.

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

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

使用Bootstrap,是否可以为某些断点保持网格列固定？并且为同一列堆叠并与其他断点的页面一起流动？

在下面的示例中,对于大屏幕,我希望右列中的内容在左列保持固定时滚动.对于小屏幕,左列应叠加在右侧,页面应正常滚动.

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">
      I want this to always be visible as the right side scrolls.
    </div>
    <div class="col">
    ...
    </div>
  </div>
</div>

CodePen示例

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

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

于是采取了以下步骤

创建了“视图”框

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