我相对较不熟悉 bootstrap ，并尝试使用 bootstrap 缀来设计我的页面。在代码中，当我从以词缀为目标的div内删除它的col-lg-6类时，它工作得很好，但是不适用于给定的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">
<div class="col-lg-6">
<!--content 2a -->
</div>
<div class="col-lg-6">
<!--content 2b -->
</div>
</div>
<div id="section-3" class="background">
<div class="col-lg-6">
<!--content 3a -->
</div>
<div class="col-lg-6">
<!--content 3b -->
</div>
</div>
<div id="section-4" class="background">
<div class="col-lg-6">
<!--content 4a -->
</div>
<div class="col-lg-6">
<!--content 4b -->
</div>
</div>
<div id="section-5" class="background">
<div class="col-lg-6">
<!--content 5a -->
</div>
<div class="col-lg-6">
<!--content 5b -->
</div>
</div>
</div>
</body>
最佳答案
该问题可以分为两部分:
1.引导网格系统
为了使网格系统正常工作，需要3个类:
.container，.row和.col-xs-*。.container:应添加到文档的包装器中。 .row:要设置列时，必须使用.row包装器包装这些列。 .col-xs-*:您可以在此处设置内容的宽度。 因此，您的文档应如下所示:
<div class="container">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6"></div>
<div class="col-xs-3"></div>
</div>
</div>
网格系统的文档为here。
就您而言，您似乎没有为列提供
.row或.container，因此实际的布局在某种程度上会被破坏并且是意外的。我认为这可能就是为什么删除那些col-lg-*类可以按需运行的原因。2.引导词缀
Affix的official document实际上非常模糊。基本上，当您向下滚动文档时，
<div data-spy="affix">元素将从以下状态转变:.affix-top添加到您的 spy 元素中data-offset-top的值时，它将删除.affix-top类并将.affix类添加到同一元素。 data-offset-bottom的值时，它将删除.affix类并将.affix-bottom类添加到同一元素。 如文档所述，您必须为这些类设置css规则，以使词缀插件正常工作。
您必须设置3条重要规则:
1.
.affix-top，.affix，.affix-bottom的宽度2.固定词缀元素后所需的位置
3.从
.affix-bottom恢复到fixed的absolute位置因此，您的CSS可能是这样的:
.affix {
top: 0;
width: 100%;
}
.affix-top {
width: 100%;
}
.affix-bottom {
position: absolute;
width: 100%;
}
这是一个使用词缀的Codepen粗略示例。我已经复制了您的代码，无论您是否在自己的部分中添加
col-lg-6，它都可以正常工作。您可以调整窗口大小以查看2列的布局。需要提到的一件事是，我不确定为什么将词缀元素放在标题中，因为在大多数设计案例中，该元素用于在侧边栏上显示节标题列表。从这个意义上讲，我使用网格中的列设置将其从标题移到主要区域。
希望这会有所帮助。
关于css - Bootstrap词缀无法与Bootstrap类一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29415032/