使用twitter引導修復標題面板

在以下代碼中，當您向下滾動頁面時，標題也會滾動。我需要修復標記爲綠色的標題面板。我怎樣才能做到這一點？使用twitter引導修復標題面板

此問題先前被詢問。但是，我無法理解解決方案。 link

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="panel-body" style="background:rgb(200,255,200)"> 
 
\t aaaa, bbbb, ccc 
 
</div> 
 

 
<div> 
 
\t <div>content 1</div> 
 
\t <div>content 2</div> 
 
\t <div>content 3</div> 
 
\t <div>content 4</div> 
 
\t <div>content 5</div> 
 
\t <div>content 6</div> 
 
\t <div>content 7</div> 
 
\t <div>content 8</div> 
 
\t <div>content 9</div> 
 
\t <div>content 10</div> 
 
\t <div>content 11</div> 
 
\t <div>content 12</div> 
 
\t <div>content 13</div> 
 
\t <div>content 14</div> 
 
\t <div>content 15</div> 
 
\t <div>content 16</div> 
 
\t <div>content 17</div> 
 
\t <div>content 18</div> 
 
\t <div>content 19</div> 
 
\t <div>content 20</div> 
 
\t <div>content 21</div> 
 
\t <div>content 22</div> 
 
\t <div>content 23</div> 
 
\t <div>content 24</div> 
 
\t <div>content 25</div> 
 
\t <div>content 26</div> 
 
\t <div>content 27</div> 
 
\t <div>content 28</div> 
 
\t <div>content 29</div> 
 
\t <div>content 30</div> 
 
\t <div>content 31</div> 
 
\t <div>content 32</div> 
 
\t <div>content 33</div> 
 
\t <div>content 34</div> 
 
\t <div>content 35</div> 
 
\t <div>content 36</div> 
 
\t <div>content 37</div> 
 
\t <div>content 38</div> 
 
\t <div>content 39</div> 
 
\t <div>content 40</div> 
 
\t <div>content 41</div> 
 
\t <div>content 42</div> 
 
\t <div>content 43</div> 
 
\t <div>content 44</div> 
 
\t <div>content 45</div> 
 
\t <div>content 46</div> 
 
\t <div>content 47</div> 
 
\t <div>content 48</div> 
 
\t <div>content 49</div> 
 
\t <div>content 50</div> 
 
\t <div>content 51</div> 
 
\t <div>content 52</div> 
 
\t <div>content 53</div> 
 
\t <div>content 54</div> 
 
\t <div>content 55</div> 
 
\t <div>content 56</div> 
 
\t <div>content 57</div> 
 
\t <div>content 58</div> 
 
\t <div>content 59</div> 
 

 
</div>

來源

2015-08-23 barej

簡單地重寫

<div class="panel-body" style="background:rgb(200,255,200)">

到

<div class="panel-body" id="head" style="background:rgb(200,255,200)">

，並添加到您的自定義CSS-文件：

#head { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
}

編輯：你可以用引導的「導航欄固定頂」一流的。

這是你更新的代碼片段，其中內聯CSS：

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="panel-body navbar-fixed-top" style="background:rgb(200,255,200);"> 
 
\t aaaa, bbbb, ccc 
 
</div> 
 

 
<div> 
 
\t <div style="margin-top: 50px;">content 1</div> 
 
\t <div>content 2</div> 
 
\t <div>content 3</div> 
 
\t <div>content 4</div> 
 
\t <div>content 5</div> 
 
\t <div>content 6</div> 
 
\t <div>content 7</div> 
 
\t <div>content 8</div> 
 
\t <div>content 9</div> 
 
\t <div>content 10</div> 
 
\t <div>content 11</div> 
 
\t <div>content 12</div> 
 
\t <div>content 13</div> 
 
\t <div>content 14</div> 
 
\t <div>content 15</div> 
 
\t <div>content 16</div> 
 
\t <div>content 17</div> 
 
\t <div>content 18</div> 
 
\t <div>content 19</div> 
 
\t <div>content 20</div> 
 
\t <div>content 21</div> 
 
\t <div>content 22</div> 
 
\t <div>content 23</div> 
 
\t <div>content 24</div> 
 
\t <div>content 25</div> 
 
\t <div>content 26</div> 
 
\t <div>content 27</div> 
 
\t <div>content 28</div> 
 
\t <div>content 29</div> 
 
\t <div>content 30</div> 
 
\t <div>content 31</div> 
 
\t <div>content 32</div> 
 
\t <div>content 33</div> 
 
\t <div>content 34</div> 
 
\t <div>content 35</div> 
 
\t <div>content 36</div> 
 
\t <div>content 37</div> 
 
\t <div>content 38</div> 
 
\t <div>content 39</div> 
 
\t <div>content 40</div> 
 
\t <div>content 41</div> 
 
\t <div>content 42</div> 
 
\t <div>content 43</div> 
 
\t <div>content 44</div> 
 
\t <div>content 45</div> 
 
\t <div>content 46</div> 
 
\t <div>content 47</div> 
 
\t <div>content 48</div> 
 
\t <div>content 49</div> 
 
\t <div>content 50</div> 
 
\t <div>content 51</div> 
 
\t <div>content 52</div> 
 
\t <div>content 53</div> 
 
\t <div>content 54</div> 
 
\t <div>content 55</div> 
 
\t <div>content 56</div> 
 
\t <div>content 57</div> 
 
\t <div>content 58</div> 
 
\t <div>content 59</div> 
 

 
</div>

請記住，你必須調整在這種情況下您的內容，因爲重疊的容器。文檔：http://getbootstrap.com/components/#navbar-fixed-top

來源

2015-08-23 01:07:02 Paul

感謝，一個問題是，內容1和2以及一半的內容編輯3我的帖子的標題 – barej

下被隱藏起來，確保添加**頂部：0; **到頭元素和一個** margin-top：50px; **（例如，像素值應該等於您的標題的高度）到第一個Content-Box。當然，你不應該像我這樣內聯，只是爲了片段。 – Paul

再次編輯它，從來沒有真正使用Bootstrap，有一個類爲您的需要。現在應該沒問題。 – Paul

加入這個head到您的頂部標題和content到包含內容的股利。

#head { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

#content { 

    margin-top: 50px; 
}

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="panel-body" id="head" style="background:rgb(200,255,200); position: fixed; 
 
top: 0; 
 
left: 0; 
 
right: 0;"> 
 
\t aaaa, bbbb, ccc 
 
</div> 
 

 
<div id="content" style="margin-top: 50px"> 
 
\t <div>content 1</div> 
 
\t <div>content 2</div> 
 
\t <div>content 3</div> 
 
\t <div>content 4</div> 
 
\t <div>content 5</div> 
 
\t <div>content 6</div> 
 
\t <div>content 7</div> 
 
\t <div>content 8</div> 
 
\t <div>content 9</div> 
 
\t <div>content 10</div> 
 
\t <div>content 11</div> 
 
\t <div>content 12</div> 
 
\t <div>content 13</div> 
 
\t <div>content 14</div> 
 
\t <div>content 15</div> 
 
\t <div>content 16</div> 
 
\t <div>content 17</div> 
 
\t <div>content 18</div> 
 
\t <div>content 19</div> 
 
\t <div>content 20</div> 
 
\t <div>content 21</div> 
 
\t <div>content 22</div> 
 
\t <div>content 23</div> 
 
\t <div>content 24</div> 
 
\t <div>content 25</div> 
 
\t <div>content 26</div> 
 
\t <div>content 27</div> 
 
\t <div>content 28</div> 
 
\t <div>content 29</div> 
 
\t <div>content 30</div> 
 
\t <div>content 31</div> 
 
\t <div>content 32</div> 
 
\t <div>content 33</div> 
 
\t <div>content 34</div> 
 
\t <div>content 35</div> 
 
\t <div>content 36</div> 
 
\t <div>content 37</div> 
 
\t <div>content 38</div> 
 
\t <div>content 39</div> 
 
\t <div>content 40</div> 
 
\t <div>content 41</div> 
 
\t <div>content 42</div> 
 
\t <div>content 43</div> 
 
\t <div>content 44</div> 
 
\t <div>content 45</div> 
 
\t <div>content 46</div> 
 
\t <div>content 47</div> 
 
\t <div>content 48</div> 
 
\t <div>content 49</div> 
 
\t <div>content 50</div> 
 
\t <div>content 51</div> 
 
\t <div>content 52</div> 
 
\t <div>content 53</div> 
 
\t <div>content 54</div> 
 
\t <div>content 55</div> 
 
\t <div>content 56</div> 
 
\t <div>content 57</div> 
 
\t <div>content 58</div> 
 
\t <div>content 59</div> 
 

 
</div>

來源

2015-08-23 01:27:25

使用twitter引導修復標題面板

回答

相關問題