Bootstrap - "przyczepiony" pierwszy wiersz

0

Witam.

Pisanie stron to dla mnie czarna magia, ale muszę dla siebie zrobić mały projekt.

Potrzebuje zrobić coś takiego że na górze strony mam wiersz ze skrótami, a poniżej zawartość strony.
Nagłówek ma być zawsze na górze, a treść przy przewijaniu wjeżdżać pod niego.

Zrobiłem coś takiego:
HTML:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
	<link rel="stylesheet" href="styleTest.css">
</head>

<body>
<div class="container">
  <div class="row row-padded">    
    <div class="col-sm-2"> 
       <p>1</p>
    </div>
	<div class="col-sm-2"> 
       <p>2</p>
    </div>	
	<div class="col-sm-2"> 
       <p>3</p>
    </div>
	<div class="col-sm-2"> 
       <p>4</p>
    </div>	
	<div class="col-sm-2"> 
       <p>5</p>
    </div>
	<div class="col-sm-2"> 
       <p>6</p>
    </div>	
	
  </div>
  <div class="row">
    <div class="col-sm-12">
		<p>Lorem ipsum dolor sit amet ligula. Sed nibh. Phasellus vestibulum. Nulla in enim ac tempor vel, dignissim faucibus, nulla nec tortor lacus et orci id sapien. Praesent a bibendum nulla. Suspendisse pede. Integer lorem nec enim luctus ullamcorper ultrices posuere sed, viverra accumsan, dolor nunc, placerat velit malesuada aliquet, lacus ipsum ut enim. Mauris auctor ligula. Mauris euismod. Ut libero purus consectetuer adipiscing elit. Curabitur magna arcu, dapibus mauris viverra fermentum leo tristique bibendum, sem vestibulum varius. Cras aliquet. Aliquam at sapien a augue imperdiet lectus non dui. Nullam sapien. Suspendisse dolor libero purus fermentum a, pharetra eget, facilisis diam eu sem rutrum vel, congue arcu. Donec odio lobortis condimentum est enim fringilla id, ullamcorper sem volutpat commodo. Cras mattis, magna ac turpis et lacus diam sit amet, est. Quisque est ultrices posuere risus. Ut bibendum libero ornare lectus pharetra eget, dapibus diam. Donec iaculis. Nam sed erat. Nullam tellus sollicitudin ligula bibendum nulla sed enim interdum sem ipsum, vel quam sed enim. Aliquam et ligula. Sed neque. Duis at nulla. Morbi vitae feugiat ultrices posuere orci. In hac habitasse.</p>

		<p>Nullam magna iaculis mi. Morbi laoreet, purus lorem, ut justo. Proin scelerisque neque vitae tellus dolor sit amet justo. Curabitur urna orci luctus nisl. Nam suscipit, erat volutpat. Vestibulum dignissim massa. Pellentesque tempus facilisis, ante ipsum sit amet nunc ut nulla. Integer ac nunc sit amet, accumsan at, nisl. Nam rhoncus, dui quis consectetuer at, vehicula viverra. Pellentesque nunc ac lectus. Sed elementum, sapien eget sem ut leo in eleifend sollicitudin fringilla. Phasellus sagittis venenatis. Sed sagittis, nunc iaculis nec, imperdiet faucibus quis, tellus. Donec ornare euismod. Integer tincidunt in, odio. Nullam nec malesuada congue. Donec eleifend ac, eros. Maecenas eget sem. Etiam tempor nibh. Fusce ullamcorper ligula accumsan fringilla ut, metus. Aliquam semper. Sed a ante ipsum in quam tristique luctus pellentesque. Proin odio. Quisque quis wisi. Integer est. Vestibulum ante eget sapien. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi felis cursus sapien. Etiam in risus. Fusce imperdiet felis, nec nisl. Ut rhoncus eget, aliquam eget, wisi. Phasellus ac ante sit amet neque. Suspendisse vestibulum ipsum. Curabitur tincidunt.</p>

		<p>Cum sociis natoque penatibus et ultrices consectetuer. Sed feugiat dolor. Ut facilisis. In purus fermentum risus. Phasellus quis wisi. Curabitur magna pharetra nec, posuere cubilia Curae, Quisque at lacus vestibulum ipsum. Duis luctus et malesuada velit wisi, tempor id, ullamcorper aliquam. Etiam sit amet, euismod pede eget dolor. Duis elementum eu, neque. Suspendisse semper semper magna diam, venenatis in, tristique sodales. Aenean egestas quam molestie elit, sit amet, tortor. Etiam ullamcorper. Nam mattis, mauris sit amet libero wisi, eget leo at augue a leo. Sed eu bibendum ac, blandit venenatis, elit semper felis fermentum vel, tortor. Nunc id sollicitudin id, nunc. Donec orci. In hac habitasse platea dictumst. Maecenas mi porttitor rutrum. Nunc condimentum nunc. Maecenas vitae lectus vel eros egestas quis, ultricies eu, tortor. Suspendisse molestie. Quisque in vehicula dolor in volutpat eu, purus. Duis sed leo. Mauris euismod. Donec facilisis libero. Proin ultrices posuere eget, dapibus non, tempor et, mollis eros cursus arcu sed felis. Morbi tellus. Cras faucibus nibh. Curabitur ultrices posuere cubilia Curae, Phasellus laoreet viverra. Pellentesque nunc. Suspendisse adipiscing aliquet ac, euismod nulla orci consequat.</p>

		<p>Curabitur at nibh. Fusce imperdiet dignissim turpis. Nullam libero dolor, luctus nisl. Morbi felis cursus wisi, vitae libero lacinia dignissim, tellus. Aenean bibendum. In justo euismod orci et ultrices fringilla mi, nec diam neque ut urna quis lacus tellus dolor sit amet, volutpat tempus orci luctus et lacus sit amet, est. Vivamus urna arcu elit, sit amet metus facilisis sodales. Vivamus a massa a dui. Etiam mollis nulla eu tortor risus, euismod at, viverra elit. Nullam pharetra sit amet, rutrum viverra, enim eu orci. Vestibulum dapibus diam. Donec in ultricies pretium. Vestibulum pulvinar. Pellentesque quam nulla, faucibus orci massa, feugiat congue, turpis et lorem. Curabitur sed arcu. Etiam at consequat id, cursus vitae, rutrum molestie, lectus blandit vestibulum ipsum. Nam dolor in velit et felis. Vestibulum ligula. Phasellus vitae ante. Vivamus tincidunt turpis luctus eu, odio. Etiam accumsan sit amet metus. Nulla facilisis diam ac posuere egestas quam congue sit amet interdum euismod orci nec elementum eros tincidunt rutrum vel, ipsum. Vestibulum eget sapien aliquet quis, dui. Mauris tortor. Phasellus sit amet eleifend ipsum pretium vitae, faucibus lorem, ut ante.</p>

		<p>Cum sociis natoque penatibus et rhoncus non, porta ligula. Ut a nunc. Donec ornare interdum, lacus. Sed eget nulla. Suspendisse sapien. Donec eleifend nunc eget enim. Sed posuere cubilia Curae, Cras ut augue. Sed eu cursus magna. Nullam feugiat velit. In accumsan odio orci, in vestibulum vel, ornare ligula nunc, tempus et, bibendum pede. Pellentesque placerat. Mauris purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Phasellus blandit, quam. Fusce wisi vulputate eu, aliquet lacinia turpis semper facilisis libero. Cum sociis natoque penatibus et ultrices bibendum, tellus. Donec nisl sit amet pede. Fusce nisl sit amet enim. In hac habitasse platea dictumst. Cum sociis natoque penatibus et malesuada velit adipiscing elit. Vestibulum euismod pulvinar, libero. Morbi hendrerit. Maecenas eget leo sit amet eleifend purus eu sem at lobortis eu, semper tellus. Integer adipiscing. Vestibulum vitae ornare dapibus. Aenean congue porta, metus tellus, imperdiet ut, dolor. Donec porta, turpis quis ante. Donec porttitor eros egestas est eu libero eget commodo vehicula, tortor fringilla purus laoreet ante ipsum dolor sit amet, magna. Vestibulum non dui sed massa nec leo vel.</p>

		<p>Fusce tristique, sollicitudin id, ullamcorper ligula quis lorem velit nulla eu wisi. Curabitur ut ligula. Duis hendrerit nulla eu aliquam ac, laoreet ligula quis turpis. Integer mi vitae est eu nulla sed nulla sed aliquet mauris sit amet magna. Vestibulum consectetuer condimentum faucibus condimentum ac, mattis adipiscing. Duis hendrerit ac, sodales pede. Duis luctus, pellentesque consectetuer, augue ut tortor. Proin in erat ac turpis metus in faucibus ligula, in ligula non leo. Aenean quis ante. Duis consequat diam. Donec rutrum et, erat. Vestibulum laoreet, ante sit amet augue. Cum sociis natoque penatibus et imperdiet dignissim volutpat tempus vitae, ullamcorper tellus quis quam in faucibus orci blandit lectus. Vestibulum tincidunt. Aliquam posuere cubilia Curae, Vivamus fermentum diam a placerat id, nunc. Maecenas malesuada fames ac arcu. In ultricies quis, dui. Aliquam orci. Suspendisse eu ante. Ut eu arcu magna, at purus. Aenean scelerisque, wisi at sagittis non, dolor. Fusce congue. Nunc viverra venenatis consequat. Morbi placerat faucibus. Nulla nec elementum in, consequat ac, dictum sit amet metus. Nullam libero fermentum mi, porttitor ante felis, malesuada fames ac turpis id consequat sapien.</p>

		<p>Nullam vitae massa metus vitae augue. Aenean interdum viverra. Cras non nisl dui turpis egestas. Mauris tortor. Nulla pellentesque ligula. Fusce mollis, purus at ipsum vitae justo. Aenean aliquet, diam eros, rhoncus eu, semper sollicitudin. Vestibulum vestibulum, dolor magna, gravida turpis. Praesent nec eros. Sed in lacus euismod pede, cursus justo vel pulvinar lacinia, risus vel nonummy at, porttitor risus. Vivamus lacus sed est. Aliquam feugiat augue eget dui eu cursus wisi nibh, dictum a, faucibus sit amet justo. Vestibulum massa sit amet ipsum primis in risus. Sed leo sed dui. Sed nec egestas risus vel leo. Maecenas sapien eu mollis orci. Proin ultricies eu, ligula. Sed sagittis malesuada. Ut elit purus, vehicula faucibus, quam. Mauris et magnis dis parturient montes, nascetur ridiculus mus. Mauris nunc pede turpis egestas. Suspendisse vitae sem. Nam consectetuer lobortis non, lacus. Vivamus est eu ante. Ut id purus scelerisque neque ut mauris id nibh. Curabitur egestas. Cum sociis natoque penatibus et eros eros in est turpis et ultrices eget, elementum eleifend, ligula. Lorem ipsum sed dolor urna, id tortor. Nulla dignissim sagittis odio urna.</p>

		<p>Pellentesque laoreet venenatis blandit sed, imperdiet facilisis neque, congue eget, aliquet mi porttitor magna. Quisque sed justo luctus et turpis. Fusce tempor nisl mollis nunc felis, nec magna. Suspendisse adipiscing. Mauris arcu. Morbi sem id lacus. Vivamus laoreet porta. Sed non felis. Aliquam eget augue. Pellentesque et ultrices interdum. Nulla posuere. Quisque ultricies tincidunt, tortor id lectus. Curabitur vitae ornare vel, placerat sodales. Vivamus posuere metus. Sed tristique senectus et nisl pellentesque quis, aliquam euismod quam at lorem id quam. Praesent blandit velit tristique tellus. Nunc felis. Cum sociis natoque penatibus et risus eros quis porta tincidunt. Nulla posuere in, volutpat metus. Nulla facilisis hendrerit. Fusce wisi vulputate sed, imperdiet faucibus, tortor eros, id diam lectus, luctus scelerisque. Duis vel ipsum primis in faucibus nibh. Aliquam erat volutpat. Pellentesque egestas mi, nec erat volutpat. Ut bibendum eget, dictum quis, blandit malesuada. Sed sit amet nisl. Vestibulum pulvinar. Nulla sed libero. Cras suscipit, velit nulla ante, luctus nulla eu libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per conubia nostra, per inceptos hymenaeos. Fusce venenatis tristique, sollicitudin a.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <img src="https://placehold.it/200x200" class="img-fluid"> 
    </div>
    <div class="col-sm-4">
      <img src="https://placehold.it/200x200" class="img-fluid">
    </div>
    <div class="col-sm-4">
       <img src="https://placehold.it/200x200" class="img-fluid">
    </div>
  </div>
</div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>

CSS:

.row-padded {  
  background-color: #F7F7F7;
  border: 1px solid #DDD;
}

Próbowałem "przypiąć" pierwszy wiersz dodając w css: position: fixed; jednak wtedy pojawia się problem, że wiersz jest zwężony a tekst pod nim widoczny.
screenshot-20180923204859.png

Podpowiecie mi jak to prawidłowo zrobić?

0

Zmieniłem w HTMLu na:

  <div class="row fixed-top row-padded">    
    <div class="col-sm-2"> 
       <p>1</p>
    </div>
	<div class="col-sm-2"> 
       <p>2</p>
    </div>	
	<div class="col-sm-2"> 
       <p>3</p>
    </div>
	<div class="col-sm-2"> 
       <p>4</p>
    </div>	
	<div class="col-sm-2"> 
       <p>5</p>
    </div>
	<div class="col-sm-2"> 
       <p>6</p>
    </div>	
  </div>

I w CSSie:

.row-padded {
  background-color: #F7F7F7;
  border: 1px solid #DDD;
}

Jest prawie dobrze :)
screenshot-20180923210515.png

Pytanie dlaczego div rozszerza się na cały ekran a nie zostaje w "rusztowaniu" bootstrapa ?

0

Ten "wiersz ze skrótami" to nie miał być navbar?
https://getbootstrap.com/docs/4.1/components/navbar/

0

kAzek kombinuje z tym navbar i chyba rzeczywiście sprawdzi się w tym miejscu :).

Dziękuję.

0

Tak na szybko, żeby w miarę wyglądało zanim pokombinujesz z tym nav...

body {
	padding-top: 35px;
}

.row-padded {  
  background-color: #F7F7F7;
  border: 1px solid #DDD;
  margin-left: 15%;
  margin-right: 15%;
}
0

Dziękuję gk1982 :).

1 użytkowników online, w tym zalogowanych: 0, gości: 1