0
Kayıt Ol

CSS - Row - Col - Hizalama

6

●

48

  • 14-01-2022, 00:25:24
    #1
    buddy
    buddy
    Selamlar, row içinde iki col kullanıyorum sm-12 md-6 şeklinde..

    rowun içindeki ilk col solda ikinci col sağında yer alıyor geniş ekranda.
    mobilde sol üstte sağ altında...

    şimdi geniş ekranda yan yanayken
    küçük ekranda sol üstte değil sol altta sağ üstte yapabilir miyim?
  • 14-01-2022, 00:28:46
    #2
    bedoso
    bedoso
    kodu paylaşırsanız yardımcı olalım
  • 14-01-2022, 00:31:38
    #3
    buddy
    buddy
    bedoso adlı üyeden alıntı: mesajı görüntüle
    kodu paylaşırsanız yardımcı olalım
    Buyrun hocam.
    <div class="row">

    <div class="col-sm-12 col-md-6">
    SOL
    </div>

    <div class="col-sm-12 col-md-6">
    SAG
    </div>

    </div>
  • 14-01-2022, 00:52:00
    #4
    bedoso
    bedoso
    row içerisinde ki columnları justify-content ile istediğiniz şekilde hizalayabilirsiniz sanırım sorununuz bu şekilde anladığım kadarıyla örneğin;

    <section class="test">
<div class="container">
<div class="row justify-content-end justify-content-md-center">
<div class="col-6">

</div>
</div>
<div class="row">
<div class="col-12">

</div>
</div>
</div>
</section>
    bu şekilde bir yazımda 2. col mobilde tam boyutta 1. col mobilde 6 birim ve sağa yaslı md cihazların üstünde de center konumunda bu mantıkta ilerleyebilirsiniz
  • 14-01-2022, 08:53:09
    #5
    buddy
    buddy
    Yok öyle değil hocam

    Ben diyorum ki, yazdığınız col 6 küçük ekranda col 12'nin altına geçsin büyük ekrandakinden tersi olacak. Umarım anlatabildim.

    bedoso adlı üyeden alıntı: mesajı görüntüle
    row içerisinde ki columnları justify-content ile istediğiniz şekilde hizalayabilirsiniz sanırım sorununuz bu şekilde anladığım kadarıyla örneğin;

    <section class="test">
    <div class="container">
    <div class="row justify-content-end justify-content-md-center">
    <div class="col-6">

    </div>
    </div>
    <div class="row">
    <div class="col-12">

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

    bu şekilde bir yazımda 2. col mobilde tam boyutta 1. col mobilde 6 birim ve sağa yaslı md cihazların üstünde de center konumunda bu mantıkta ilerleyebilirsiniz
  • 14-01-2022, 17:58:20
    #6
    bedoso
    bedoso
    buddy adlı üyeden alıntı: mesajı görüntüle
    Yok öyle değil hocam

    Ben diyorum ki, yazdığınız col 6 küçük ekranda col 12'nin altına geçsin büyük ekrandakinden tersi olacak. Umarım anlatabildim.
    edit: https://codepen.io/bedoso/pen/yLzGdMO

    anladım alt alta dizildiklerinde yer değiştimek istiyorsunuz ters şekilde şöyle bir şey deneyebilirsiniz yukarıda ki col-6 nın aynısından col-12 nin altına kopyalayıp col-12 altında ki kapsayıcıya d-block d-md-none üstte ki orijinal col-6 nın kapsayıcısına da d-none d-md-block verdiğinizde masaüstüne üstte ki mobilde altta ki görünecektir bu şekilde ters bir şekilde altına düşecektir sanırım bu çözüyor 

        <div class="row">
        <div class="col-6">
            <div class="d-none bg-dark text-white d-md-block">bolum 1</div>
        </div>
        <div class="col-12">
            <div class="bg-dark text-white">
                bolum 2
            </div>
        </div>
        <div class="col-6">
            <div class="bg-dark text-white d-block d-md-none">
                bolum 1
            </div>
        </div>
    </div>
  • 14-01-2022, 18:29:31
    #7
    buddy
    buddy
    evet tam istediğim gibi görünüyor hocam ama bu şekilde kopyalama yaparak kullanamam içeriği php dinamik oluşturuyorum ve kaynak kodunda yüzlerce satır fazla oluşturacak. Başka yolu yok mu ?

    bedoso adlı üyeden alıntı: mesajı görüntüle
    edit: https://codepen.io/bedoso/pen/yLzGdMO

    anladım alt alta dizildiklerinde yer değiştimek istiyorsunuz ters şekilde şöyle bir şey deneyebilirsiniz yukarıda ki col-6 nın aynısından col-12 nin altına kopyalayıp col-12 altında ki kapsayıcıya d-block d-md-none üstte ki orijinal col-6 nın kapsayıcısına da d-none d-md-block verdiğinizde masaüstüne üstte ki mobilde altta ki görünecektir bu şekilde ters bir şekilde altına düşecektir sanırım bu çözüyor 

        <div class="row">
        <div class="col-6">
            <div class="d-none bg-dark text-white d-md-block">bolum 1</div>
        </div>
        <div class="col-12">
            <div class="bg-dark text-white">
                bolum 2
            </div>
        </div>
        <div class="col-6">
            <div class="bg-dark text-white d-block d-md-none">
                bolum 1
            </div>
        </div>
    </div>