• 02-08-2020, 23:07:52
    #1
    merhabalar, arkadaşlar bootstrap ile kodlattığım bir yazılım var masaüstünde 5 adet yan yana ekleniyor mobilden girdiğim zaman bunları 2li yan yana listelemek istiyorum nasıl yapabilirim
  • 02-08-2020, 23:13:04
    #2
    col-6 3 2 bu şekilde denermisin

    6 yaz olmazsa 3 2 şeklinde rakamları değiştirip deneyebilirsin

    yada sürüm farkı varsa

    col-xs-6 gibi yapabilirsin
  • 02-08-2020, 23:14:07
    #3
    col-xs-6 deneyin isterseniz
  • 02-08-2020, 23:16:09
    #4
    style.css de tam olarak ne yapmamız gerekiyor @SABOCES; @DenqeSiz;
    @import url([url]https://fonts.googleapis.com/css?family=Lato);[/url]
    .govde .icerik .row .row-img,.govde .iceriku .row-header .buton{-webkit-box-shadow:0 0 11px 4px #000;-moz-box-shadow:0 0 11px 4px #000}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;text-decoration:none;font-family:Lato,sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;background:#232526;background:-webkit-linear-gradient(left,#414345,#232526);background:-moz-linear-gradient(left,#414345,#232526);background:-o-linear-gradient(left,#414345,#232526);background:linear-gradient(to right,#414345,#232526)}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.govde{width:1149px;height:100%;margin:auto}.govde .header{width:100%;height:auto;margin-top:20px;float:left}.govde .header .row{font-size:25px;width:383px;height:100px;float:left;color:#fff;line-height:100px}.govde .header .row:nth-child(2){text-align:center}.govde .header .row:nth-child(3){text-align:right}.govde .icerik{width:100%;height:100%;float:left}.govde .icerik .row{width:229.8px;height:200px;float:left;margin-top:70px}.govde .icerik .row .row-img{width:80px;height:80px;background:#fff;border-radius:80px;position:relative;z-index:2;text-align:center;box-shadow:0 0 25px 0 #000}.govde .icerik .row .row-img img{width:40px;margin-top:15px}.govde .icerik .row .row-kutu{width:190px;height:160px;background:#fff;position:relative;z-index:1;text-align:center;margin-top:-40px;float:right}.govde .icerik .row .row-kutu img{width:190px;height:160px;-webkit-box-shadow:0 0 20px 4px #000;-moz-box-shadow:0 0 20px 4px #000;box-shadow:0 0 25px 0 -webkit-filter: brightness(50%);position:relative}.govde .icerik .row .row-kutu .row-kutu-yazi{width:100%;font-weight:bolder;font-size:20px;line-height:160px;text-align:center;position:absolute;margin-top:-50px;color:#fff}.govde .icerik .row .row-kutu .row-kutu-yazi p{width:190px;line-height:30px;margin-top:55px}.govde .iceriku{width:100%;height:102%;float:left;margin-top:30px;padding-bottom:100px}.govde .iceriku .row-header{width:100%;height:60px;margin-bottom:40px;float:left}.govde .iceriku .row-header a{color:#fff}.govde .iceriku .row-header .buton{text-align:center;padding-right:15px;width:170px;height:40px;border-radius:30px;background:#232526;background:-webkit-linear-gradient(left,#414345,#232526);background:-moz-linear-gradient(left,#414345,#232526);background:-o-linear-gradient(left,#414345,#232526);background:linear-gradient(to right,#414345,#232526);cursor:pointer;font-size:18px;line-height:40px;box-shadow:0 0 25px 0 #000}.govde .iceriku .row-header .buton img{width:25px;float:left;position:middle;margin-left:8px;margin-top:8px}.govde .iceriku .row{width:229.8px;height:257px;float:left;margin-top:50px}.govde .iceriku .row .row-img{width:80px;height:80px;background:#fff;border-radius:80px;position:relative;z-index:2;float:right;margin-top:-40px;text-align:center;-webkit-box-shadow:0 0 11px 4px #000;-moz-box-shadow:0 0 11px 4px #000;box-shadow:0 0 25px 0 #000}.govde .iceriku .row .row-img img{width:40px;margin-top:15px}.govde .iceriku .row .row-kutu{width:190px;height:160px;background:#fff;position:relative;z-index:1;text-align:center;float:left}.govde .iceriku .row .row-kutu img{width:190px;height:160px;-webkit-box-shadow:0 0 20px 4px #000;-moz-box-shadow:0 0 20px 4px #000;box-shadow:0 0 25px 0 -webkit-filter: brightness(50%);position:relative}.govde .iceriku .row .row-kutu .row-kutu-yazi{width:100%;font-weight:bolder;font-size:24px;line-height:160px;text-align:center;position:absolute;margin-top:-234px;color:#fff}.govde .iceriku .row .row-kutu .row-kutu-yazi p{width:190px;line-height:30px}.govde .icerikd{width:100%;height:102%;float:left;margin-top:30px;padding-bottom:100px}.govde .icerikd .row-header{width:100%;height:60px;float:left}.govde .icerikd .row-header a{color:#fff}.govde .icerikd .row-header .buton{text-align:center;padding-right:15px;width:170px;height:40px;float:left;border-radius:30px;background:#232526;background:-webkit-linear-gradient(left,#414345,#232526);background:-moz-linear-gradient(left,#414345,#232526);background:-o-linear-gradient(left,#414345,#232526);background:linear-gradient(to right,#414345,#232526);cursor:pointer;font-size:18px;line-height:40px;-webkit-box-shadow:0 0 11px 4px #000;-moz-box-shadow:0 0 11px 4px #000;box-shadow:0 0 25px 0 #000}.govde .icerikd .row-header .buton img{width:25px;float:left;position:middle;margin-left:8px;margin-top:8px}.govde .icerikd .row{width:100%;float:left;margin-top:30px}.govde .icerikd .row .row-kutu1{width:839px;height:auto;float:left;margin-right:10px}.govde .icerikd .row .row-kutu1 img{width:839px}.govde .icerikd .row .row-kutu2{width:300px;float:left}.govde .icerikd .row .row-kutu2 .row-kutu-baslik{width:100%;color:#fff;text-align:center}.govde .icerikd .row .row-kutu2 .row-kutu-baslik .row-kutu-baslik-img img{width:170px}.govde .icerikd .row .row-kutu2 .row-kutu-baslik .row-kutu-baslik-yazi{width:100%;font-size:22px;margin-top:20px;margin-bottom:20px}.govde .icerikd .row .row-kutu2 .row-kutu-aciklama{width:100%;color:#fff;text-align:center;margin-top:25px}.govde .icerikd .row .row-kutu2 .row-kutu-aciklama .row-kutu-aciklama-img img{width:280px}.govde .icerikd .row .row-kutu2 .row-kutu-aciklama .row-kutu-aciklama-yazi{width:100%;font-size:22px;margin-top:20px;margin-bottom:20px}.govde .icerikd .row .row-kutu2 .row-kutu-fiyat{width:150px;color:#fff;text-align:center;margin-top:40px;float:left}.govde .icerikd .row .row-kutu2 .row-kutu-fiyat .row-kutu-fiyat-img img{width:130px}.govde .icerikd .row .row-kutu2 .row-kutu-fiyat .row-kutu-fiyat-yazi{font-size:35px;margin-bottom:15px}.govde .icerikd .row .row-kutu2 .row-kutu-sure{width:150px;color:#fff;text-align:center;margin-top:52px;float:left}.govde .icerikd .row .row-kutu2 .row-kutu-sure .row-kutu-sure-img img{width:130px}.govde .icerikd .row .row-kutu2 .row-kutu-sure .row-kutu-sure-yazi{font-size:22px;margin-bottom:15px}.govde
    
    .footer{width:100%;float:left;text-align:center;margin-top:100px;background-color:#fff;color:#000;margin-bottom:80px;padding-bottom:10px;padding-top:10px;}
  • 02-08-2020, 23:18:07
    #5
    Üyeliği durduruldu
    style.css degil kaynak dosyasında eğer bootstrap 3 ise col-xs-6 yaparak divleri 2leyebilirsiniz. bootstrap 4 ise col-6 şeklinde düzeltmeniz gerek.
  • 02-08-2020, 23:19:52
    #6
    @Stex; kaynak dosyasında bu şekilde col-xs vs yazmıyor
  • 02-08-2020, 23:31:52
    #7
    Üyeliği durduruldu
    DataNetron adlı üyeden alıntı: mesajı görüntüle
    @Stex; kaynak dosyasında bu şekilde col-xs vs yazmıyor
    bu yapı bootstrap değil gibi emin misiniz bootstrap ile kodlandığına ?
  • 02-08-2020, 23:44:34
    #8
    Kurumsal PLUS
    DataNetron adlı üyeden alıntı: mesajı görüntüle
    merhabalar, arkadaşlar bootstrap ile kodlattığım bir yazılım var masaüstünde 5 adet yan yana ekleniyor mobilden girdiğim zaman bunları 2li yan yana listelemek istiyorum nasıl yapabilirim

    Sorunuzun tam olarak cevabı;

    https://getbootstrap.com/docs/4.5/la.../#grid-options

    Hangi çözünürlükte hangi class prefix i kullanacağınız yazar.

    Sadece mobil olarak düşünmeyin farklı tarayıcı ve çözünürlüklere göre düzenleyebilirsiniz.

    Birden fazla class prefix kullanmak da mümkündür ard arda..

    col-3 col-sm-6

    Gibi..