ブートストラップの scrollspy が機能しなかった理由を理解しようとしています。セクション タグが積み上げられており、子要素で正しく機能していないことがわかりました。
Chrome で計算されたスタイル (他のブラウザーと同様) は次のとおりです。
background-color: transparent;
color: #333;
display: block;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
height: 0px;
line-height: 18px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
width: 940px;
ただし、 内のデータ<section>は次のように計算されます。
background-color: transparent;
color: #333;
display: block;
float: left;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
height: 317px;
line-height: 18px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 0px;
margin-top: 0px;
width: 780px;
bootstrap.css (編集していません) をコメントアウトすると、セクションは本来あるべき姿になります。ブートストラップが行う唯一のことは、に設定sectionすることblockです。
私の HTML が問題を引き起こしているのではないかと思います。私のページのレイアウトは次のとおりです。
<body>
<div class="container">
<header>
<h1>HEADER</h1>
<nav>
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#overview">Introduction</a></li>
<li><a href="#begin">The Beginning</a></li>
...
</ul>
</div>
</nav>
</header>
<section id="overview">
<div class="span10">
<h2>Introduction</h2>
<hr class="full">
<p> text text text text </p>
</div>
</section>
<section id="begin">
<div class="span10">
<h2>The Beginning</h2>
<hr class="full">
<p> text text text text </p>
</div>
</section>
...
</div>
<script>..</script>
</body>
すべてのセクションは、互いに 1 ピクセル離れて積み重ねられています。この問題の原因は、bootstrap.css とは何ですか。これまたは私のレイアウト？すべての変数を JavaScript スタイルで編集したところ、bootstrap.css にたどり着きました。私を助けてください。
アップデート
<section>簡単なページを作成しましたが、まだタグが正しく計算されません。