0
Я работаю над небольшим проектом, чей интерфейс построен с последней версией Bootstrap. У меня есть разделы моей домашней страницы, но я заставляю их вести себя так, как я хочу.Прокрутить область содержимого только с помощью Bootstrap
<body>
<div class="container-fluid max-height">
<div class="row max-height">
<div class="col-md-2 col-sm-12 col-xs-12 site-nav">
<div class="row">
<div class="brand">
<a href="index.html">
<img src="http://placehold.it/200x320" class="img-responsive" alt="logo" />
</a>
</div><!-- .brand -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
</div><!-- .row -->
</div><!-- .col-md-2 -->
<div class="col-md-10 col-sm-12 site-content">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 info-bar">
<h2>SOME TITLE</h2>
</div><!-- .col-md-12 -->
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sem libero, vulputate vel tellus eu, suscipit facilisis metus. Nulla tempus cursus elit, eget pellentesque risus euismod ut. Fusce sed sodales mauris. In velit arcu, blandit sed tempor vitae, feugiat eu erat. Phasellus ligula odio, porta in libero non, ultrices mollis purus. Duis sollicitudin aliquet nunc, ut dictum turpis laoreet eget. Phasellus eu neque efficitur, bibendum odio vitae, sagittis libero. Proin commodo efficitur magna ac sollicitudin. Aenean bibendum urna at diam accumsan tincidunt. Proin ac elit vitae augue rutrum convallis. Donec magna ex, tempor at libero quis, mattis pharetra nunc. Maecenas sit amet nisi in odio interdum interdum.</p>
<p>Quisque ligula ex, pellentesque sit amet ligula non, ullamcorper egestas nulla. Sed in sapien ut velit finibus scelerisque ac quis purus. Etiam libero nibh, euismod id augue quis, condimentum aliquam diam. Integer faucibus vitae velit sed iaculis. Praesent laoreet neque est, at pharetra nunc scelerisque sit amet. Curabitur fringilla ex a quam commodo, quis hendrerit ipsum ullamcorper. Vestibulum pretium leo odio, feugiat tristique augue laoreet id. Aenean lobortis, mi sit amet pellentesque condimentum, lectus velit gravida diam, a consequat arcu magna eget diam. Phasellus in iaculis dolor, nec rhoncus dolor.</p>
</div><!-- .col-md-6 -->
<div class="col-md-6">
<div class="article-photo">
<img src="http://placehold.it/500x350" class="img-responsive" alt="article" />
</div>
</div>
</div><!-- .row -->
</div><!-- .col-md-10 -->
</div><!-- .row -->
</div><!-- .container-fluid -->
</body>
Адрес JSFiddle.
Я бы хотел, чтобы строка заголовка и боковая панель оставались там, где они есть, а не прокручиваются с контентом. Единственное, что я хочу прокрутить, - это контент (синий).
Как я могу добиться этого только с помощью CSS в Bootstrap?
ли вы имеете в виду вы хотите, чтобы боковая панель и строка заголовка, чтобы придерживаться верхней и содержание прокрутки под ним? –
@ Нажмите, да, если под ним вы имеете в виду под заголовком и боковой панелью, в основном, синюю секцию для прокрутки вверх и вниз и все остальное, чтобы оставаться там, где они есть. – Ciwan