v2.5.2
Giriş yap

Row Vermeden Div İçinde Logo Sıfırlama Sorunu

yazilimyolcusu
389 defa görüntülendi
4

Merhaba arkadaşlar. Aşağıdaki kodlara "row" verdiğimde tam oturuyor logo. Ama row vermezsem biraz içeriden başlıyor. "row" kullanmadan köşelere sıfır ayarlayamaz mıyız acaba? Çıktısı resimdeki gibi oluyor.
https://www.hizliresim.com/m2i2yai

html, body {
margin:0px;
padding:0px;
}

.container {
width:1140px;
height:auto;
background:green;
}

.logo-sosyalmedya-ve-giris-kayit-alani-div {
width:1140px;
height:75px;
}

.logo {
width:33.33%;
height:auto;
}

.logo img {
height:60px;
margin-left:0px;
}
css
Cevap yaz
Cevaplar (4)
yazilimyolcusu
1058 gün önce

Teşekkür ederim. "p0" işe yaradı. Bilgiler için teşekkür ederim.

0
#005024
alico
1060 gün önce

Son olarak Flex GAP desteği geliyor sanırsam bir tek safari tam desteklemiyordu. Önümüzde ki zamanlarda Bootstrap da margin: 0 -15 kaldırıp gap geçer ve bu çilede biter.

0
#005013
alico
1060 gün önce

Cevabı aşağıdan linkten bulabilirsin. Birde bu tür şeylere hemen cevap yazabilmek için aşağıdaki gibi bir ortamda canlandırıp paylaşırsan daha hızlı dönüş alabilirsin.

https://codepen.io/alico/pen/NWpgKjE

Row vermeden deyince başta ne diyorsun diyecektim ama container class etiketini görünce bootstrap da takıldığını anlaşıldı. Özetle olay şu container etiketi sol ve sagdan padding:0 15px degerleri alır. Çünkü root olarak içinde grid için yer alacak olan row etiketleri ters istikamette margin:0 -15px değeri alırlar.

Container'da row etkiketi kullanmadığına göre senin yapman gerekende padding değerlerini sıfırlaman gerekiyorsa padding sıfırlayacak bir class etiketini hazır etmendir.

BootStrap'ın bunun için bir şeyi varmı bilemiyorum. Çünkü ben hep kendi grid sistemimi kullanıyorum. O yüzden örnek linkte gösterdiğim gibi .p0 adlı class etiketi tanımladığımı göreceksin.

Aynısı yada benzeri bir şeyi sisteminde yerleşik kılacak şekilde modellersin.

İyi Çalışmalar

0
#005012
yazilimyolcusu
1060 gün önce

Html kısmını eklemeyi unutmuşum.

<div class="container">
<div class="logo-sosyalmedya-ve-giris-kayit-alani-div">
<div class="logo">
<a href="index.php"><img src="images/logo/logo.jpg" /></a>
</div>
</div>
</div>
0
#005007