[ neb @ 17.01.2020. 11:46 ] @
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]
[ Deunan @ 17.01.2020. 12:26 ] @
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
[ mjanjic @ 17.01.2020. 16:08 ] @
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.
[ neb @ 17.01.2020. 19:27 ] @
Hvala Vam.
[ mjanjic @ 18.01.2020. 03:19 ] @
Nema na čemu.