0
Kayıt Ol

Boostrap Responsive Yardım

9

●

270

  • 28-08-2019, 17:44:43
    #1
    Seyum
    Seyum
    Merhabalar, Boostrap ta aşağıdaki görüntüyü bir türlü yapamadım mobile alınca hepsi alt alta geliyor nasıl yapabilirim baya uğraştım boostrap ile kolayca yapılıyor diye biliyorum o yüzden css yazmadım yardımcı olursanız çok sevinirim.

  • 28-08-2019, 17:48:25
    #2
    instads
    instads
    https://getbootstrap.com/docs/4.0/layout/grid/

    Grid system - Izgara diye geçer.
  • 28-08-2019, 17:49:06
    #3
    Baran_Ozdemir
    Baran_Ozdemir
    Kimlik doğrulama veya yönetimden onay bekliyor.
    <div class="col-md-3 col-sm-6">
 KODLARINIZ
</div>
  • 28-08-2019, 18:01:31
    #4
    flyingatm
    flyingatm
    vanilla css'de

    ilk iki içeriği X div'ine al.
    diğer 2 içeriği Y div'ine al.

    piksel 468'in altında mı?

    X div'i display:flex;
    Y div'i display:flex;

    içerik width:100%;

    belki işinize yarar.
  • 28-08-2019, 18:07:13
    #5
    TayfunGuler
    TayfunGuler
    class a "col-6" ekler misin?
  • 28-08-2019, 20:01:05
    #6
    Seyum
    Seyum
    Baran_Ozdemir adlı üyeden alıntı: mesajı görüntüle 
    <div class="col-md-3 col-sm-6">
 KODLARINIZ
</div>
    aşağıdaki benim kodum hocam düzde sıkıntı yok mobile alınca şekillenmiyor

    <div class="container">

<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
<div class="col">
4 of 4
</div>
</div>
</div>
  • 28-08-2019, 20:04:12
    #7
    Baran_Ozdemir
    Baran_Ozdemir
    Seyum adlı üyeden alıntı: mesajı görüntüle
    aşağıdaki benim kodum hocam düzde sıkıntı yok mobile alınca şekillenmiyor

    <div class="container">

<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
<div class="col">
4 of 4
</div>
</div>
</div>
    Bu kod böyle mobil özelliği kazanmaz şununla değiştir;

    <div class="row">
<div class="col-md-3 col-sm-6">
1 of 3
</div>
<div class="col-md-3 col-sm-6">
2 of 3
</div>
<div class="col-md-3 col-sm-6">
3 of 3
</div>
<div class="col-md-3 col-sm-6">
4 of 4
</div>
</div>
</div>
  • 28-08-2019, 20:11:03
    #8
    Seyum
    Seyum
    Baran_Ozdemir adlı üyeden alıntı: mesajı görüntüle
    Bu kod böyle mobil özelliği kazanmaz şununla değiştir;

    <div class="row">
<div class="col-md-3 col-sm-6">
1 of 3
</div>
<div class="col-md-3 col-sm-6">
2 of 3
</div>
<div class="col-md-3 col-sm-6">
3 of 3
</div>
<div class="col-md-3 col-sm-6">
4 of 4
</div>
</div>
</div>
    Yeni birşey öğrenmiş olduk teşekkür ederim