Question

我正在尝试使用bootstrap创建一个具有全宽度的固定列（包含图像的标题）。在此列下方还有另一行包含三列（中间div中的另一个图像）。当我运行我的代码时，事情变得混乱，并且其他内容也会在固定列之上传递，应该在它下面传递。有人请帮帮我。我是bootstrap的新手。这是我的代码

.container-fluid{
background-color:#B8DB4D;
}
#header{
position: fixed;
   width:100%;
  background-color:red;}

这是CSS

{{1}}

Answer 1

Bootstrap对你所描述的内容有一个约定，可以通过在内容上使用.navbar-fixed-top类来实现，该内容应粘贴/固定到页面顶部。

此功能按预期工作的唯一要求是，您的<body>元素的padding-top属性设置为.navbar-fixed-top nav元素的预期高度。（在这个例子中，图像高150px，所以我们将身体的填充顶部设置为该高度）。这样，页面加载时导航后面不会隐藏任何内容（仅当用户滚动时）。

＆＃13;

.container-fluid {
  background-color: #B8DB4D;
}
#header {
  position: absolute;
  background-color: red;
}
body {
  padding-top: 150px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=header%20img&w=350&h=150">
      </div>
    </div>
  </div>
</nav>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
    </div>
    <div class="col-sm-3"></div>
  </div>
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
    </div>
    <div class="col-sm-3"></div>
  </div>
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
    </div>
    <div class="col-sm-3"></div>
  </div>
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-6">
      <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>

＆＃13;

bootstrap中的固定列不起作用

1 个答案: