Bootstrap粘贴更改列表项宽度 [英] Bootstrap Affix Changing List Item Width

问题描述

我使用Twitter Bootstrap的词缀来附加目前包含导航列表的左栏。

 < div class =row> 
< div class =span3> 
< ul class =nav nav-listdata-spy =affixdata-offset-top =300 
< li class =nav-header>导航< / li> 
< li>< a href =＃> Link1< / a>< / li> 
< li>< a href =＃> Link2< / a>< / li> 
< / ul> 
< / div> 
  

从我的理解，这意味着粘贴将不会踢，直到滚动300px。我的问题是，我的列表项的宽度更改后添加踢。

这是我的悬停在列表项之前的屏幕截图，在悬停背景上，宽度是正确的。

这是一个屏幕截图，我滚动了300px，并添加踢脚。你可以看到，由于某种原因，宽度减少。

解决方案

我想知道为什么会发生这种情况，如何纠正它，一些研究，我已经弄清楚了什么问题。

1. 在粘贴之前，宽度继承自




2. 添加导航之后，该导航将从该父级中移除，这就是为什么它会丢失它的宽度。

解决方案是：手动给.affix类一个宽度。在我的例子中，我给它一个模拟span3父项的宽度。

  .affix {
 position：固定; 
 top：20px; 
 width：190px; 
} 
  

span3的宽度为220像素，左右间距为15像素。所以我把上面的CSS工作。

如果你有多个词缀，你必须正确选择和应用不同的宽度。

I'm using Twitter Bootstrap's affix to affix the left column which currently holds a navigation list.

<div class="row">
    <div class="span3">
        <ul class="nav nav-list" data-spy="affix" data-offset-top="300">
            <li class="nav-header">Navigation</li>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
        </ul>
    </div>

From my understanding, this means that affix won't kick in until 300px have been scrolled. My problem is that the width of my list item changes after affix kicks in.

Here is a screenshot of my hovering over a list item before affix kicks in. You can based on the hover background, the width is correct.

Here is a screenshot after I've scrolled 300px and affix kicks in. You can see that for some reason the width decreases.

I want to know why this is happening, how to correct it, and if I am using affix correctly.

解决方案

After some research, I've figured out what the issue is.

1. Before the affix kicks in, the width is inherited from the 'span3' div with parents my affixed nav.

2. After affix kicks in, that affixed nav is removed from that parent which is why it's losing it's width. The affix plugin basically rips it out of the DOM and places the affixed element manually on top.

The solution is to manually give the .affix class a width. In my case, I've given it a width that simulates a span3 parent.

.affix {
    position: fixed;
    top: 20px;
    width: 190px;
}

span3 is 220px width, with 15px padding on both left and right. So my putting the above CSS has worked.

If you have multiple affixes, you'd have to properly select and apply the different widths.

这篇关于Bootstrap粘贴更改列表项宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！