引導程序中的固定列無法正常工作

-1

我正在嘗試使用引導程序製作一個固定的列（標題 - 包含圖像）全寬。在這一列下面有另一行包含三列（中間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;}

來源

2015-09-05 Bera

哪裏是你的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>

來源

2015-09-05 17:44:56 pizzasynthesis

這真的很有幫助。非常感謝...！ @Pizzasynthesis – Bera

@Bera，如果它回答你的問題，你應該標記答案是正確的！ – pizzasynthesis

對不起，我對於stackoverflow很新。所以，我不知道這一點，並感謝修正。 – Bera

引導程序中的固定列無法正常工作

回答

相關問題