Question

好吧所以我在一个容器内部有一个来自Bootstrap的标准导航栏，该容器也是由bootstrap设计的。

<div class="container">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
       <!-- Nav Bar Goes On From Here. Only Posted this as an examlpe -->

现在，当我将navbar-fixed-top类添加到导航栏时，它从容器中出来并在屏幕上从左到右填充。我意识到这是Bootstrap的默认行为，但我怎样才能保持容器的宽度？并以一种敏感的方式做到这一点。

Answer 1

根据bootstrap文档，

container-fluid应该是全宽的。如果您将其更改为其他container，这有帮助吗？

Answer 2

使用此

@media (min-width: 1200px) {
    .navbar {
        position: fixed !important;
        top: 0px;
        width: 940px;
    }
}

或添加导航栏的类容器

Answer 3

.navbar-fixed-top的css非常简单：

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  border-width: 0 0 1px;
}

加

.navbar-fixed-top {
  top: 0;
}

（我认为这是股票版本的内容。）

如果你想将它固定在顶部但不希望它是全宽的，那么你真的不想要navbar-fixed-top。你只想添加像＆＃34; top：0＆＃34;您的导航栏的样式/类。

Answer 4

如果您将容器添加到＆lt;导航/＆gt;

您会收到以下信息：http://jsfiddle.net/bo9jgpk2/

<nav class="navbar navbar-default navbar-fixed-top container" role="navigation">

Bootstrap Navbar固定到顶部

4 个答案: