Question

我想知道是否可以使用bootstrap，创建带有徽标和其他信息的标题，然后导航栏。但是徽标不会被固定，只有当导航栏位于页面顶部时才会出现。 Here an example of header i'm trying to do with bootstrap

Answer 1

这部分取决于你的意思＆＃34; Header＆＃34;。

通常＆＃34; jumbotron＆＃34; class被用作这样的标题：

<div class="jumbotron"><img src='logo.png'>My Cool Company</div>

导航栏是一个独立元素，特别是导航栏。它可以固定在页面上（滚动内容）或屏幕上的静态（保持在顶部或底部）

Nabber示例（始终位于顶部）：

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
  <a class="navbar-brand" href="#">Fixed top</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
</nav>

您可以在Navbar的Bootstrap页面上找到其他详细信息：
Bootstrap Components navbar Placement

此示例中的展示位置为＆＃34; navbar-fixed-top＆＃34;这样它就会停留在屏幕的顶部，即使在滚动时也是如此。

您可能还需要标题下的导航，并希望两者都滚动，直到导航栏点击屏幕顶部，然后将其固定在顶部。这有时称为粘性导航栏。它可以用jQuery完成，但是目前我还没有在Bootstrap中知道一种不添加自定义javascript的方法。

Sticky Menu in jQuery - answer

如果您确实需要第二个选项，而不使用jQuery，请在滚动屏幕顶部时询问另一个关于如何使用Javascript从固定切换到静态的问题。

Answer 2

感谢您的回答，但我认为这不是我的问题，我认为我的解决方案与jumbotron无关。

如果您查看我在下面给出的链接，您可以看到当我们位于页面顶部时，该网站的徽标（w3school.com）位于顶部。当我们扯下来时，这个标志会消失，只有导航栏（主页，html，css，......）才能保持在最顶层。

Bootstrap：导航未固定在开头，然后修复

2 个答案: