引导程序中的固定列无法正常工作

问题描述：

我正在尝试使用引导程序制作一个固定的列（标题 - 包含图像）全宽。在这一列下面有另一行包含三列（中间div中的另一个图像）。当我运行我的代码时，事情变得杂乱无章，而且其他内容也会通过固定列上方，而这些列应该在其下方传递。有人请帮助我。我是bootstrap的新手。这里是我的代码引导程序中的固定列无法正常工作

<div class="container-fluid"> 
<div class="row"> 

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
    <div id="header"><img class="img-responsive" src="images/profile.jpg"></div> 
</div> 
</div> 
<div class="row"> 
    <div class="col-sm-3"></div> 
    <div class="col-sm-6"><img class="img-responsive" src="images/helpUs.jpg"></div> 
    <div class="col-sm-3"></div> 
    </div> 
</div>

下面是CSS

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

哪里是你的CSS？ –

答

引导有你描述一个约定，这可以通过使用这应该是粘的内容.navbar-fixed-top类来完成/固定到页面的顶部。

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

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

<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>

这真的很有帮助。非常感谢...！ @Pizzasynthesis – Bera

@Bera，如果它回答你的问题，你应该标记答案是正确的！ – pizzasynthesis

对不起，我对于stackoverflow很新。所以，我不知道这一点，并感谢修正。 – Bera

引导程序中的固定列无法正常工作

相关推荐