Quantcast
Channel: Forum Pasja Informatyki - Najnowsze pytania bez odpowiedzi
Viewing all articles
Browse latest Browse all 21942

przestawianie kolumn bootstrap

$
0
0

Używam bootstrapa, potrzebuje stworzyc przy rozdzielczosc laptop, tablet - 2 rzędy po 3 zdjecia w kazdym. Natomiast w rozdzielczości "telefonowej" powinny być 3 rzędy po 2 zdjęcia. I tu pojawia się problem - pokazują się 4 rzędy: w pierwszym rzędzie - 2 zdjęcia; w drugim rzędzie 1 zdjęcie i miejsce puste obok; w trzecim rzędzie 2 zdjęcia; w ostatnim rzędzie  jedno zdjęcie i miejsce puste. Jak zrobić by pokazały się 3 rzędy po 2 zdjęcia w każdym (przy małej rozdzielczości)? 

Fragment kodu:

---pierwszy rząd----

<div class="row">
                <div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
                    <img src="img/team/face1.jpg">
                    <div class="list-item-name">imię i nazwisko</div>
                    <div class="list-item-description">CEO</div> 
                    <div class="bio">Lorem ....</div>
                    <ul class="mail">    
                        <li><a href="mailto:...@gmail.com"> mail</a></li>
                        <li><a href="https://twitter.com/...">Twitter</a></li>
                    </ul>
                </div>
            
                <div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
                    <img src="img/team/face2.jpg">
                    <div class="list-item-name">imię i nazwisko</div>
                    <div class="list-item-description">Senior Vice President</div> 
                    <div class="bio">Lorem..... </div>
                    <ul class="mail">
                        <li><a href="mailto:...@gmail.com"> mail</a></li>
                        <li><a href="https://twitter.com/..."> Twitter</a></li>
                    </ul>    
                </div>

                <div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
                    <img src="img/team/face3.jpg">
                       <div class="list-item-name">imię</div>
                       <div class="list-item-description">Senior Vice President Worldwide Marketing</div> 
                       <div class="bio">Lorem ... </div>
                       <ul class="mail">
                        <li><a href="mailto:..@gmail.com">mail</a></li>
                        <li><a href="https://twitter.com/...">Twitter</a></li>
                    </ul>
                </div>
                
            </div>

----drugi rząd---

            <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
                    <img src="img/team/face4.jpg">
                       <div class="list-item-name">imię </div>
                       <div class="list-item-description">Vice President Marketing comunications</div> 
                       <div class="bio">Lorem...</div>
                       <ul class="mail">
                        <li><a href="mailto:...@gmail.com"> mail</a></li>
                        <li><a href="https://twitter.com.l">Twitter</a></li>
                    </ul>    
                </div>
                
                <div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
                    <img src="img/team/face5.jpg">
                    <div class="list-item-name">imie</div>
                    <div class="list-item-description">Chief Financial Officer</div> 
                    <div class="bio">Lorem ,,,. </div>
                    <ul class="mail">
                        <li><a href="mailto:...@gmail.com">mail</a></li>
                        <li><a href="https://twitter.com.">Twitter</a></li>
                    </ul>
                </div>

                <div class="col-md-3 col-sm-3 col-xs-6 list-item text-center">
                    <img src="img/team/face6.jpg">
                    <div class="list-item-name">imie</div>
                    <div class="list-item-description">Chief People Officer</div> 
                    <div class="bio">Lorem </div>
                    <ul class="mail">
                        <li><a href="mailto:...@gmail.com">mail</a></li>
                        <li><a href="https://twitter.com/..."> Twitter</a></li>
                    </ul>    


Viewing all articles
Browse latest Browse all 21942

Trending Articles


H. H. Schild - MRI Zrozumieć Rezonans Magnetyczny [PDF] [DJVU] [PL]


VW Crafter 2011 ESP błędy


Alawar Keygen POLECAM


Kombajn ziemniaczany GRIMME HLS 750


POTANIACZ


Sok malinowy


Antena Rybakowa


[147] Alfa Romeo 147 FL Amica (jedna na sto)


Thinspiracje


uszkodzony (zatarty?) silnik