2015-08-23 2 views
0

В следующем коде, когда вы прокручиваете страницу вниз, заголовок также прокручивается. Мне нужно установить панель заголовка, отмеченную как зеленая. Как я могу это сделать?Исправьте панель заголовка, используя twitter bootstrap

Этот вопрос задан ранее. Однако я не могу понять решение. 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>

ответ

2

Просто переписать

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

Edit: Вы можете просто использовать Bootstrap в "NavBar фиксированной сверху" -класса.

Вот ваш обновленный Отрывок с инлайн-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

+0

спасибо, одна проблема заключается в том, что содержание 1 и 2, и половина содержимого 3 скрыты под заголовком – barej

+0

Edited мой пост, не забудьте добавить ** верхний: 0; ** в Head-Element и ** margin-top: 50px; ** (например, значение пикселя должно быть равно высоте вашего заголовка) до первого Content-Box. Конечно, вы не должны делать это, как я, это просто для фрагмента. – Paul

+0

Отредактировано это снова, никогда не использовалось Bootstrap, есть класс для ваших нужд. Теперь все должно быть хорошо. – Paul

1

Добавить head в свой верхний заголовок и content в DIV, содержащий ваше содержание.

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

Смежные вопросы