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ı?

css twitter-bootstrap

— James Jeffery
kaynak

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

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>

Snippet'i genişlet

Bootstrap 2 için:

Kod snippet'ini göster

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row-fluid">
    <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>
    <div class="span8">
        <div class="row-fluid">
            <div class="span6"><div class="well">2</div></div>
            <div class="span6"><div class="well">3</div></div>
        </div>
        <div class="row-fluid">
            <div class="span6"><div class="well">4</div></div>
            <div class="span6"><div class="well">5</div></div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <div class="well">6</div>
    </div>
    <div class="span4">
        <div class="well">7</div>
    </div>
    <div class="span4">
        <div class="well">8</div>
    </div>
</div>

Snippet'i genişlet

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

— Mastergalen
kaynak

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

2

stackoverflow.com/questions/19695784/…

— Mastergalen

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>

— disrvptor
kaynak

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.

— James Jeffery
kaynak

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 :)

— Şerif Hadid
kaynak

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>

— Ps Naidu
kaynak