Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

bootstrap - dve slike padaju jedna ispod druge kada se smanji prozor?

[es] :: Web dizajn i CSS :: bootstrap - dve slike padaju jedna ispod druge kada se smanji prozor?

[ Pregleda: 1101 | Odgovora: 4 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

neb
RS

Član broj: 30960
Poruke: 462
*.cpe.sattrakt.net.



+1 Profil

icon bootstrap - dve slike padaju jedna ispod druge kada se smanji prozor?17.01.2020. u 11:46 - pre 51 meseci
Kada kreiram dve responsive slike hocu da obe slike budu jedna pored druge.
Kada smanjujem prozor obe slike se smanjuju jedna pored druge. Medjutim
kada dodjem do malog prozora obe slike se same pomeraju jedna ispod druge.
Zasto se ovo desava da li neko zna odgovor? Sta treba uraditi da obe slike ostanu jedna pored druge?

Code:

index.php

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>


<div class="container-fluid">
<div class="i-am-centered">
<div class="row">

<div class="col-xs-3 col-sm-3 col-md-3">
<img src="img_forest.jpg" alt="1" class="img-responsive" />
</div>

<div class="col-xs-3 col-sm-3 col-md-3">
<img src="img_forest.jpg" alt="1" class="img-responsive" />
</div>


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

</body>
</html> 




Code:

style.css

.col-md-3 {
  padding: 0;
  /* border: 1px solid red; */
}

/* this should come out-of-the box with
bootstrap 3 */
.img-responsive {
  width: 100%;
  hight: auto;
  
}


.row {
border: 1px solid blue;
}

.i-am-centered { margin: auto; max-width: 40%;}



Primer
[link]
http://www.offsetb.com/bootstrap1
[/link]
 
Odgovor na temu

Deunan

Član broj: 338178
Poruke: 83
*.dynamic.isp.telekom.rs.



+21 Profil

icon Re: bootstrap - dve slike padaju jedna ispod druge kada se smanji prozor?17.01.2020. u 12:26 - pre 51 meseci
Imas bootstrap 4, a koristis klase od bootstrap-a 3.
col-xs-3 vise ne postoji
img-responsive je zamenjen sa img-fluid
Code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>


<div class="container-fluid">
<div class="i-am-centered">
<div class="row">

<div class="col-3 p-md-0">
<img src="img_forest.jpg" alt="1" class="img-fluid" />
</div>

<div class="col-3 p-md-0">
<img src="img_forest.jpg" alt="1" class="img-fluid" />
</div>


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

</body>
</html> 


. p-md-0 // padding ce biti 0 od 'md' sirine
 
Odgovor na temu

mjanjic
Šikagou

Član broj: 187539
Poruke: 2679



+690 Profil

icon Re: bootstrap - dve slike padaju jedna ispod druge kada se smanji prozor?17.01.2020. u 16:08 - pre 51 meseci
Zavisi koji "breakpoint" hoćeš za prelazak na prikaz slika u koloni. Ako je to recimo sm (small), onda:
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>


<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <img src="img_forest.jpg" alt="1" class="img-fluid" />
        </div>
        <div class="col-md-6">
            <img src="img_forest.jpg" alt="1" class="img-fluid" />
        </div>
    </div>
</div>

</body>
</html> 


Za ostale klase (margine, padding, centriranje, itd.) pogledaj Bootstrap dokumentaciju (v4.4.1):
https://getbootstrap.com/docs/4.4/getting-started/introduction/

Inače, ako ne koristiš Bootstrap za ceo sajt, nema potrebe ni za ovo, može da se uradi elegantno pomoću Flex-a i @media upita (kod većeg ekrana da bude flex-direction:row, a kod manjeg ekrana flex-direction:column.
Blessed are those who can laugh at themselves, for they shall never cease to be amused.
 
Odgovor na temu

neb
RS

Član broj: 30960
Poruke: 462
*.cpe.sattrakt.net.



+1 Profil

icon Re: bootstrap - dve slike padaju jedna ispod druge kada se smanji prozor?17.01.2020. u 19:27 - pre 51 meseci
Hvala Vam.
 
Odgovor na temu

mjanjic
Šikagou

Član broj: 187539
Poruke: 2679



+690 Profil

icon Re: bootstrap - dve slike padaju jedna ispod druge kada se smanji prozor?18.01.2020. u 03:19 - pre 51 meseci
Nema na čemu.
Blessed are those who can laugh at themselves, for they shall never cease to be amused.
 
Odgovor na temu

[es] :: Web dizajn i CSS :: bootstrap - dve slike padaju jedna ispod druge kada se smanji prozor?

[ Pregleda: 1101 | Odgovora: 4 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.