Bootstrap - rwd elementów na stronie.

Question

Co ja robię źle. Nie mogę pojąć jak ładnie zbudować responsywność strony :(
Mam 14 elementów, które chcę aby układały się ładnie przy zmianie rozmiaru okna przeglądarki. Nie chce aby schodziły pojedynczo do następnego wiersza tylko, że przy określonej rozdzielczości - dzieliły się np. na dwie grupy po 6 elementów jedna pod sobą. Jak to zrobić? Ukrywaniem rozmiaru lg i definiowaniem kolejnego widoku dla innej rozdzielczości? (kod poniżej). Nie do końca to działa :(
  I druga rzecz, używam @media i teraz aby ładnie wyglądały czcionki na ekranie powyżej 1200px muszę je robić bardzo małe aby przy zmniejszaniu okna do granicy kolejnej zmiany nie zepsuły one widoczności bo okna się zmniejsza a one nie i dopiero na granicy się znów zmniejszają i znów musze je tak zmniejszyć aby wyglądały dobrze przez cały czas dochodzenia do następnej zmiany? Czy ja czegoś nie rozumiem ? Może jest na to sposób?

       <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 hidden-md hidden-s hidden-xs">
                    
                    <ul>
                        <li><img src="images/1.png" /><div class="s1">JavaScript</div></li>
                        <li><img src="images/2.png" /><div class="s1">AngularJS</div></li>
                        <li><img src="images/4.png" /><div class="s1">Bootstrap</div></li>
                        <li><img src="images/6.png" /><div class="s1">CSS</div></li>
                        <li><img src="images/7.png" /><div class="s1">SASS</div></li>
                        <li><img src="images/5.png" /><div class="s1">HTML</div></li>
                        <li><img src="images/8.png" /><div class="s1">RWD</div></li>
                        <li><img src="images/9.png" /><div class="s1">JSON</div></li>
                        <li><img src="images/ps.png" /><div class="s1">AngularJS</div></li>
                        <li><img src="images/illustrator.png" /><div class="s1">AngularJS</div></li>
                        <li><img src="images/indesign.png" /><div class="s1">AngularJS</div></li>
                        <li><img src="images/corel.png" /><div class="s1">AngularJS</div></li>
                        <li><img src="images/visual.png" /><div class="s1">AngularJS</div></li>
                        <li><img src="images/git.png" /><div class="s1">AngularJS</div></li>
                    </ul>
                </div>
                    <div class="col-md-12 hidden-s hidden-xs hidden-lg">
                        <ul>
                            <li><img src="images/1.png" /><div class="s1">JavaScript</div></li>
                            <li><img src="images/2.png" /><div class="s1">AngularJS</div></li>
                            <li><img src="images/4.png" /><div class="s1">Bootstrap</div></li>
                            <li><img src="images/6.png" /><div class="s1">CSS</div></li>
                            <li><img src="images/7.png" /><div class="s1">SASS</div></li>
                            <li><img src="images/5.png" /><div class="s1">HTML</div></li>
                            <li><img src="images/8.png" /><div class="s1">RWD</div></li>
                        </ul>
                            </div>
                    <div class="col-md-12  hidden-s hidden-xs hidden-lg">
                        <ul>
                            <li><img src="images/9.png" /><div class="s1">JSON</div></li>
                            <li><img src="images/ps.png" /><div class="s1">AngularJS</div></li>
                            <li><img src="images/illustrator.png" /><div class="s1">AngularJS</div></li>
                            <li><img src="images/indesign.png" /><div class="s1">AngularJS</div></li>
                            <li><img src="images/corel.png" /><div class="s1">AngularJS</div></li>
                            <li><img src="images/visual.png" /><div class="s1">AngularJS</div></li>
                            <li><img src="images/git.png" /><div class="s1">AngularJS</div></li>
                        </ul>

                    </div>
                </div>
        </div>

 

Comments

Przeczytaj FAQ. Będziesz na przyszłość wiedział jak poprawnie wstawić kod.

Answer 1

Witam!

Nie wiem czy o to chodzi, ale można wykorzystać różne kombinacje z ilością kolumn i przesuwaniem ich (col-*-push-*, col-*-pull-*). Najpierw dobrze wiedzieć jakiego wyglądu potrzebujesz. Ja np. pogrupowałam po dwa <li> w każdej kolumnie i tak dopasowałam ilość kolumn aby pozycje <li> odpowiednio się przesuwały wypełniając w poziomie stronę.

Poniżej kod bo trudno mi to wytłumaczyć (dodałam numerki do tytułów aby było widać co się jak przemieszcza):

<div class="row">

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<ul>
<li><img src="images/1.png" /><div class="s1">1JavaScript</div></li>
<li><img src="images/2.png" /><div class="s1">2AngularJS</div></li>
</ul>
</div>

<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
<ul>
<li><img src="images/4.png" /><div class="s1">3Bootstrap</div></li>
<li><img src="images/6.png" /><div class="s1">4CSS</div></li>
</ul>
</div>

<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<ul>
<li><img src="images/7.png" /><div class="s1">5SASS</div></li>
<li><img src="images/5.png" /><div class="s1">6HTML</div></li>
</ul>
</div>

<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
<ul>
<li><img src="images/8.png" /><div class="s1">7RWD</div></li>
<li><img src="images/9.png" /><div class="s1">8JSON</div></li>
</ul>
</div>

<div class="col-lg-1 col-md-4 col-sm-4 col-xs-6">
<ul>
<li><img src="images/ps.png" /><div class="s1">9AngularJS</div></li>
<li><img src="images/illustrator.png" /><div class="s1">10AngularJS</div></li>
</ul>
</div>

<div class="col-lg-2 col-lg-push-1 col-md-4 col-md-pull-1 col-sm-4 col-xs-6">
<ul>
<li><img src="images/indesign.png" /><div class="s1">11AngularJS</div></li>
<li><img src="images/corel.png" /><div class="s1">12AngularJS</div></li>
</ul>
</div>

<div class="col-lg-3 col-lg-push-1 col-md-4 col-md-pull-2 col-sm-12 col-xs-12">
<ul>
<li><img src="images/visual.png" /><div class="s1">13AngularJS</div></li>
<li><img src="images/git.png" /><div class="s1">14AngularJS</div></li>
</ul>
</div>

</div>

Jeśli chodzi o media queries to może użyć font-size:large,  medium, x-small itp.

<style>
@media (min-width: 1200px) {body{font-size:large;}}
@media (max-width: 1199px) and (min-width: 992px){body{font-size:medium;}}
@media (max-width: 991px) and (min-width: 768px){body{font-size:small;}}
@media (max-width: 767px) {body{font-size:x-small;}}
</style>

pozdrawiam,