Birden çok satıra yayılmak üzere bir Bootstrap sütununu nasıl edinebilirim?


158

Bootstrap ile aşağıdaki tabloyu nasıl yapacağımı anlamaya çalışıyorum.

İki satıra yayılan kutuyu (sayı 1) nasıl oluşturacağımdan emin değilim. Kutular, düzenlendiği sırada programlı olarak oluşturulur. Kutu 1 hoş bir mesajdır.

resim açıklamasını buraya girin

Bununla gitmek için en iyi yol hakkında herhangi bir fikir var mı?


1
twitter.github.io/bootstrap/scaffolding.html#gridSystem , Bootstrap ızgara sistemini iç içe yerleştirebilirsiniz.
TheHippo

1
İlk satırda 2 satırı iç içe yerleştirmek yerine 3 yerine 2 satır oluşturmalı mısınız? Kutular programlı olarak oluşturulduğunda bu sorunlu olabilir.
James Jeffery

1
İşe yarayacağını bilmiyordum, ancak pull-leftsınıfı tüm kutulara eklemek işe yarar mı? kutu 1'i 2 + 4 ile aynı yüksekliğe getirmez, ancak yüksekliği ayarladığınızda çalışmasına izin vermelidir.
Hailwood

Hailwood, bunu cevap olarak koy, eğer yapmazsam kodumu yapıştırırım. En azından Chrome'da çalıştı. Diğer tarayıcılarda test etmeniz gerekiyor.
James Jeffery

@Hailwood infact, çekmeye gerek yok. Sadece ilk elemanda bir yükseklik ayarlamak işe yarar.
James Jeffery

Yanıtlar:


165

Bootstrap 3 için:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>

Bootstrap 2 için:

JSFiddle (Bootstrap 2) demosuna bakın: http://jsfiddle.net/SxcqH/52/


Kutu 4 büyüdükçe dört ve beş kutuların satır yüksekliğini nasıl doldurmasını istersiniz?
Imran NZ


Bu örnek pek işe yaramıyor, ilk sütunun alt kenarı diğerleriyle biraz yanlış hizalanmış.
JackKalish

Bu harika bir cevap, ama kutu 5'in 3. sıraya da uzanması gerekiyorsa ve dahası, dinamik olarak?
Misha'el

@ Misha'el Bu oldukça basit, sadece kutu 1 için yaptıklarını yapın ve kutu 3/5'e uygulayın. Eşit büyüklükte 3 sütun olmalıdır, biri dışta sadece 1 satır, biri de iki satır içerir.
Nathan Williams

17

Yorumların önerdiği gibi, çözüm yuvalanmış açıklıkları / satırları kullanmaktır.

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>

1

Aşağıdaki örnek işe yaramış gibi görünüyordu. Sadece ilk elemanda bir yükseklik ayarlamak

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

Ben yardım edemem ama bir satır yanlış kullanımı olduğunu düşünüyorum.


1

Satırların nasıl yayılacağı ile ilgili kısmın iyice cevaplandığına inanıyorum (yani satırları iç içe geçirerek), ancak aynı zamanda iç içe satırlarımın kaplarını doldurmaması sorunuyla da karşılaştım. Esnek kutu ve negatif kenar boşlukları bir seçenek olsa da, önceden tanımlanmış h-50sınıfı row2, 3, 4 ve 5 içeren kutularda kullanmak çok daha kolay bir çözümdür .

Not: Kullanıyorum Bootstrap-4, sadece paylaşmak istedim çünkü aynı problemle karşılaştım ve daha zarif bir çözüm buldum :)


0
<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.