Bootstrap ızgara sistemi ile iç içe satırlar?

196

Bunun gibi 2x2 biçiminde 4 küçük resim ile 1 büyük resim istiyorum:

Şekil 1 Örnek

İlk düşüncem her şeyi bir sıraya yerleştirmekti. Ardından iki sütun oluşturun ve ikinci sütunda 1x1 ve 2x2 efekti oluşturmak için iki satır ve iki sütun oluşturun.

Ancak, bu mümkün görünmüyor ya da ben doğru yapmıyorum?

— Greg
kaynak

Lütfen şu ana kadar denediğiniz HTML / CSS’yi gönderin.

— Steve Sanders

Bunu deneyin: jsfiddle.net/KXje2/9 Kemanımı ekstra küçük ekranlar aracılığıyla genişlemek için düzenledim.

— BuddhistBeast

Yukarıdaki kod sizin için işe

— BuddhistBeast

299

Bootstrap Sürüm 3.x

Her zaman olduğu gibi Bootstrap'ın harika belgelerini okuyun:

3.x Dokümanlar : https://getbootstrap.com/docs/3.3/css/#grid-nesting

Üst düzey satırının bir .containeröğenin içinde olduğundan emin olun . Satırları her .rowiç içe yerleştirmek istediğinizde , sütununuzun içinde yeni bir tane açmanız yeterlidir .

İşte çalışmak için basit bir düzen:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

Bootstrap Sürüm 4.0

4.0 Dokümanlar : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

İşte 4.0 için güncellenmiş bir sürüm, ancak ızgaradaki tüm dokümanlar bölümünü gerçekten okumalısınız, böylece bu güçlü özellikten nasıl yararlanacağınızı anlayacaksınız

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

Tanıtım Fiddle jsFiddle 3.x | jsFiddle 4.0

Hangi gibi görünecek ( biraz ek stil ile ):

ekran görüntüsü

— KyleMit
kaynak

1 yaşındaki bir konuyu ele geçirdiğim için üzgünüm, ama görüntü ile 1 ve 3 arasında 0px almayı biliyor musun

— alex

@alex emin - sadece set margin: 0;üzerinde .mini-boxeleman. Örneğim netlik için sadece bir tane eklemekti, ancak çizgiyi tamamen kaldırabilirsiniz. İşte bir demo

— KyleMit

neden minibox 2 için col ve minibox 3 için col arasında satır yok? ve varsa ne olacak?

— pashute

@pashute, bkz. Bootstrap 3 ızgarası, arka arkaya kaç sütun olması gerçekten önemli mi? . Her mini kutu kullanılabilir alanın% 50'sini kaplar (sütun tarafından sınırlandırılır), böylece iki satır ilk satırı kaplar. Ekstralar yeni bir satıra sarılır. Sen olabilir ayrıca sıralar halinde bunların her eşleştirmek, ama gerek yok. Bootstrap varsayılan olarak sarar, böylece işaretlemenizi yeni satırlarla karıştırmanıza gerek kalmaz. Eğer anlamsal olarak anlamlıysa, onun için git derim. Ancak yalnızca 4 nesnenin bir listesini görüntülüyorsanız, bunları aynı satırda tutun.

— KyleMit

@ user3921890, bu bir yorum satırında yanıtlanamayacak kadar büyük bir konu. Ne yapmaya çalıştığınızı ve bunu yapmaya yönelik en az bir denemeyi açıklayan yeni bir ileti gönderebilir ve ardından buraya bağlayabilirsiniz.

— KyleMit

@KyleMit'in söylediklerine ek olarak şunları kullanmayı düşünün:

col-md-* daha büyük dış sütunlar için sınıflar
col-xs-* daha küçük iç sütunlar için sınıflar

Bu, sayfayı farklı ekran boyutlarında görüntülediğinizde yararlı olacaktır.

Küçük bir ekranda, mümkünse daha küçük iç sütunlar korunurken daha büyük dış sütunların sarılması gerçekleşir.

— ezzadeen
kaynak