In Twitter Bootstrap's ScrollSpy, where exactly can I put data-spy="scroll"?

Question

It says clearly on the documentation

just add data-spy="scroll" to the element you want to spy on (most typically this would be the body)

But it seems I can only get it to work if I put it on the body. When I put it in any other element that I wish to spy on, the last element of the nav gets selected.

Here it's on the body, and it works, and this is the same exact thing but with data-spy="scroll" on the element I want to spy on, and it fails (only the last element gets activated).

Am I doing something wrong or is this a bug ?

Answer 1

Your 2nd example can be fixed by using:

#TryToPutDataSpyHere{
  display:inline;
}

But for some reason it doesn't works on the demo

I managed to reproduce your issue from the doc: http://jsfiddle.net/baptme/KbphR/

But it only works if I had the following css code (used on the doc):

.scrollspy-example {
  height: 200px;
  overflow: auto;
  position: relative;
}

http://jsfiddle.net/baptme/KbphR/1/

It seems like height: 200px; and overflow: auto; are both necessary

Not in you case maybe because of your .box{height: 500px;}