Как получить цвет фона для обновления на таблетках с помощью Bootstrap Scrollspy?

-1

Я пытаюсь использовать Bootstrap Scrollspy в сворачиваемой панели. Кажется, что все работает, за исключением того, что таблетки не обновляют/меняют цвет, когда я нажимал на них. Я думаю, что мне нужно изменить CSS, но я не уверен, что мне нужно изменить.Как получить цвет фона для обновления на таблетках с помощью Bootstrap Scrollspy?

HTML

<body> 
<div class="container"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
     Title 1 
    </a> 
    </h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse in"> 
       <div class="panel-body"> 
        <div class="row"> 
         <nav class="col-sm-3" id="myScrollspy"> 
          <ul class="nav nav-pills nav-stacked"> 
           <li class="active"><a href="#Subtitle1">Subtitle1</a></li> 
           <li><a href="#Subtitle2">Subtitle2</a></li> 
           <li><a href="#Subtitle3">Subtitle3</a></li> 
           <li><a href="#Subtitle4">Subtitle4</a></li> 
           <li><a href="#Subtitle5">Subtitle5</a></li> 
           <li><a href="#Subtitle6">Subtitle6</a></li> 
           <li><a href="#Subtitle7">Subtitle7</a></li> 
          </ul> 
         </nav> 
         <div class="col-sm-9"> 
          <div id="Subtitle1"> 
           <h1>Subtitle1</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle2"> 
           <h1>Subtitle2</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle3"> 
           <h1>Subtitle3</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle4"> 
           <h1>Subtitle4</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle5"> 
           <h1>Subtitle5</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle6"> 
           <h1>Subtitle6</h1> 
           <p>some text</p> 
          </div> 
          <div id="Subtitle7"> 
           <h1>Subtitle7</h1> 
           <p>some text</p> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
     Title 2 
    </a> 
    </h4> 
      </div> 
      <div id="collapseTwo" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
    <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree"> 
     Title 3 
    </a> 
    </h4> 
      </div> 
      <div id="collapseThree" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- /container --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

CSS

body { 
    position: relative; 
    } 

ul.nav-pills { 
     top: 50px; 
     position: fixed; 
    } 

    div.col-sm-9 div { 
     height: 250px; 
     font-size: 28px; 
    }

источник

2015-11-02 MrAutoIt

Вы забыли добавить некоторые пользовательские самозагрузки атрибуты первого тела тега. Это заставит кнопки пилюльки выделить, хотя скоро вы увидите, что у вас будет другая проблема. Выделенное состояние пропустит две последние кнопки, от 4 до 7, поскольку полоса прокрутки слишком быстро достигнет нижней части браузера. Это будет немного сложно сделать, я думаю. Кроме того, он будет, зависит от длины текста каждой секции

HTML:

<body data-spy="scroll" data-target="#myScrollspy">

источник

2015-11-02 21:46:56 IndieRok

Спасибо. Я понимаю что ты имеешь ввиду. Теперь он прыгает на последних кнопках. Есть ли какая-то работа для этого? – MrAutoIt

Я использовал пользовательские атрибуты самозагрузки, которые где рекомендуется.

HTML

<body data-spy="scroll" data-target="#myScrollspy">

Затем я изменил высоту каждой секции в CSS, чтобы исправить эту проблему прыжков.

CSS

#Subtitle1, 
    #Subtitle2, 
    #Subtitle3, 
    #Subtitle4, 
    #Subtitle5, 
    #Subtitle6, 
    #Subtitle7 { 
     height: 500px; 
    }

источник

2015-11-02 23:50:22 MrAutoIt

Хорошо! это то, что я нашел, чтобы предотвратить прыжок – IndieRok

Как получить цвет фона для обновления на таблетках с помощью Bootstrap Scrollspy?

ответ

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