为什么在Bootstrap中滚动时添加列的宽度会发生变化？ [英] Why does the width of affix column change while scrolling in Bootstrap?
问题描述
这里是演示
这是我到目前为止的代码：
< body data-spy =scrolldata-target =＃myScrollspy >
< div class =container>
< div class =row>
< div class =col-md-3id =myScrollspy>
< div class =panel panel-defaultdata-spy =affixdata-offset-top =0>
< div class =panel-body> Lorem ipsum< / div>
< / div>
< / div>
< div class =col-md-9>
< div class =panel panel-default>
< div class =panel-body>
< p> Lorem ipsum< / p>
< / div>
< / div>
< / div>
< / div>
< / div>
< / body>
如果您查看演示，只要向下滚动，小列的宽度添加更改。为什么会这样？
有什么想法解决它吗？
谢谢
因为当小列碰到窗口的顶部时，它的position属性被设置为fixed。如果某个元素的位置是固定的，则将其从页面的正常流程中取出。因此，它可以填充所需的空间。
您必须在小列固定时设置宽度。
In Bootstrap I made two columns one with affix to make it fixed while scrolling and one normal column. Here is the demo
This is my code so far:
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="row">
<div class="col-md-3" id="myScrollspy">
<div class="panel panel-default" data-spy="affix" data-offset-top="0">
<div class="panel-body">Lorem ipsum</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-body">
<p>Lorem ipsum </p>
</div>
</div>
</div>
</div>
</div>
</body>
If you check the demo, as soon as you scroll down, the width of the small column which has affix changes. Why is that?
Is there any idea to fix it? Thanks
Because when the small column hits the top of the window, it's position property is set to fixed. If an element is fixed positioned, it is taken out of the normal flow of the page. So, it fills as much space as it need. You have to set the width for the small column when it becomes fixed.
这篇关于为什么在Bootstrap中滚动时添加列的宽度会发生变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
