标签: affix
Bootstrap 3.0附加列表更改宽度
我正在迁移到bootstrap 3.0.0并且我在左边有一个附加菜单的问题:一旦它被粘贴(在10px滚动之后),它的宽度就会改变.在这个小提琴中它变得更小,在我的真实网站中它变得更宽,并扩展了实际内容.
它与bootstrap v2.3.2完美配合.检查后看起来列表项目与.affix {position: fixed;}出现的不匹配.
有任何想法吗？
解决方案:基于最新的评论,我最后添加了这个JS片,它可以很好地修复它,而不必为固定元素设置固定宽度:
$(function() {
var $affixElement = $('div[data-spy="affix"]');
$affixElement.width($affixElement.parent().width());
});
推荐指数
解决办法
查看次数
如何获取Bootstrap 3附加方法的动态数据偏移值
我想使用Bootstraps文档(http://getbootstrap.com/javascript/#affix)中描述的Affix方法,但是我想在滚动到它之后将其固定到页面顶部的导航栏可以有不同的偏移量值取决于它上面的内容.
以下是导航栏的示例:
<div class="navbar navbar-default" data-spy="affix" data-offset-top="200">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</div>
如您所见,data-offset-top当前设置为200.如果上面的内容高200像素,这可以正常工作,但上面的内容是动态的,因此此导航栏上方的高度并不总是相同.我怎样才能使这个价值data-offset-top变得充满活力？
我猜我将不得不使用javascript的方式来做这件事,但我很肯定.
推荐指数
解决办法
查看次数
Twitter Bootstrap Affix - 如何坚持到底？
我已经阅读了文档,我觉得我正在做他们在他们的例子中展示的内容.然而,当我尝试它时,我无法让它发挥作用.我希望它以类似于文档的方式工作.它position:fixed在滚动过标题后变为,然后一旦触及页脚,它就变成position:absolute并粘在底部.
演示:http://jsfiddle.net/uvnGP/1/
JS
$("#account-overview-container").affix({
offset: {
top: $("header").outerHeight(true),
bottom: $("footer").outerHeight(true)
}
});
上海社会科学院
#account-overview-container {
&.affix{
top:10px;
bottom:auto;
}
&.affix-top{
//Do I need this?
}
&.affix-bottom{
position:absolute;
top:auto;
bottom:140px;
}
}
推荐指数
解决办法
查看次数
Bootstrap data-spy ="affix"无法处理Angular View更改
我正在试图找出为什么affix当我改变我的Angular视图时我的面板不会保持不变.
我已将affix属性直接添加到第一页的面板(详细信息),并将其保留在数据间谍中仅在第二页(航班)中.
在一个完整的网络版本中,如果我刷新航班页面,突然启动词缀,并在滚动时保持放置,但如果我只是使用Angular导航到页面则不会.
当我在视图之间导航时,看起来这个词缀没有被Bootstrap添加到类中.
HTML:
<div class="panel panel-primary mySidebar" id="sidebar"
data-spy="affix" data-offset-top="0" data-offset-bottom="200">
CSS:
.mySidebar.affix {
position: fixed;
top: 250px;
}
.mySidebar.affix-bottom {
position: absolute;
top: auto;
bottom: 450px;
}
这是一个Plunker ..
http://plnkr.co/edit/S0Bc50?p=preview
我在这里找到了一个类似的问题:
Twitter Bootstrap:在单页面应用程序中不会触发粘贴
但我无法弄清楚如何将这个应用于我的问题......
任何帮助都会很棒!
推荐指数
解决办法
查看次数
Bootstrap词缀不保持列布局
当我在浏览器中向下滚动(chrome)时,右列被一直推到左边,我的侧边栏被推到背景,并且所有右侧内容都在左侧边栏上.
这只有在我将附加属性应用到侧边栏div时才会发生.
如果您注意到,在正常情况下,页面呈现没有问题,如下所示:
但是,当我向下滚动时,它的样子如下:
供您参考,这就是我实现词缀div的方式:
<div class="row content-wrapper">
<div data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
<div class="col-lg-3">
<!-- Sidebar code -->
</div>
</div>
<div class="col-lg-9">
<!-- content -->
</div>
</div>
这是JS小提琴的链接,以便您可以看到实时发生的问题:
这是一个JS小提琴,你可以看到错误:
我怎样才能解决这个问题？
推荐指数
解决办法
查看次数
Twitter Bootstrap贴有Navbar - 下面的div跳了起来
很难描述问题.所以,看看这个jsFiddle:
当导航栏固定在顶部时,内容会跳到它下面.
CSS:
.affix {
position: fixed;
top: 0px;
}
#above-top {
height: 100px;
background: black;
}
问题出在哪儿？
推荐指数
解决办法
查看次数
Twitter bootstrap 3:当粘贴火焰时,Navbar会改变宽度
好吧,我有一个关于bootstrap-3词缀脚本的好奇问题.你可以在这个小提琴中看到问题.请水平最大化结果框架并向下滚动以便粘贴被激活.如您所见,导航栏在右侧增加,我真的看不出任何这种效果的原因.我暂时通过addng解决了这个问题
.container
{
padding-left: 0px;
padding-right: 0px;
}
到了css.但是,正如你所看到的,它不是很漂亮,我不想删除这些填充.或者,我可以设置静态宽度,如
width: 1140px;
在#nav.affix中.但这不是很敏感...我真的尝试了很多方法,但无法获得任何令人满意的结果.你知道吗,是什么原因造成的？
编辑
好的,Chrome的调试器给了我更多的信息:在激活词缀之前,nav-element得到了类'affix-top'等等(从chrome-debugger NOT html源代码摘要!):
<nav id="nav" class="navbar navbar-default affix-top" role="navigation" data-spy="affix" data-offset-top="133" style="background-color: yellow">
奇怪的是,在HTML代码中没有声明affix-top.不过,#nav.nav.navbar.navbar-default-affix-top的大小如下:1140px x 52px.
滚动和词缀激活后,类'affix-top'变为'affix','affix'的大小如下:1170px x 52px.
这些是30px,导航栏向右增长.但是我怎么能阻止它呢？最重要的是,我找不到任何csv文件中的类词缀顶...
推荐指数
解决办法
查看次数
Bootstrap词缀不能与bootstrap类一起使用
我是相对较新的bootstrap并试图用bootstrap词缀设计我的页面.这里的代码当我col-lg-6从那里删除我的类位于内部词缀div目标div它完全正常但它不适用于给定的bootstrap类在那里应用.我在删除那个特定的类之后尝试过它完全正常.
<body id="top" data-spy="scroll" data-target="#header">
<header id="header" style="background-position: 0% 0px;">
<a class="image avatar" style="cursor: pointer;">
<img src="resources/images/Nimesh.jpg" alt=""></a>
<h1><strong>Ata at Turpis</strong>, cep curae tempus<br> adipiscing erat ultrices laoreet<br> aliquet ac Adipiscing.</h1>
<ul class="nav nav-tabs nav-stacked" data-spy="affix">
<li class="active"><a href="#section-1">Section One</a></li>
<li><a href="#section-2">Section Two</a></li>
<li><a href="#section-3">Section Three</a></li>
<li><a href="#section-4">Section Four</a></li>
<li><a href="#section-5">Section Five</a></li>
</ul>
</header>
<div id="profileImage">
</div>
<div id="main">
<div id="section-1" class="background">
<div class="col-lg-6">
<!--content 1a -->
</div>
<div class="col-lg-6">
<!--content 1a -->
</div>
</div>
<div id="section-2" class="background"> …推荐指数
解决办法
查看次数
Bootstrap 3使用附加功能在滚动时将导航栏位置固定到顶部
这让我疯了......这可能很简单,因为我没有打钉:请给出一个提示:-)
我正在尝试使用Bootstrap 3为我的网站添加新的布局.滚动时,我希望导航栏固定在屏幕顶部.
我得到了它的工作,但是当词缀类开始时,导航栏下面的内容会发生变化.我无法找到它的方法.
推荐指数
解决办法
查看次数
Affix在Bootstrap 4(alpha)中不起作用
根据Bootstrap 3文档,我将以下属性添加到导航栏:
<nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" >
...
</nav>
向下滚动页面后,Bootstrap 4不会将类添加到附加的navbar.谁能告诉我如何解决这个问题？Bootstrap.js和jQuery.js正在运行.
推荐指数
解决办法
查看次数
标签 统计
affix ×10
css ×9
jquery ×4
javascript ×2
navbar ×2
angularjs ×1
bootstrap-4 ×1
ng-view ×1
offset ×1
width ×1