Làm cách nào tôi có thể có được một cột Bootstrap để trải rộng nhiều hàng?

Tôi đang cố gắng tìm ra cách thực hiện lưới sau với Bootstrap.

Tôi không chắc chắn cách tôi tạo hộp (số 1) kéo dài hai hàng. Các hộp được tạo lập trình theo thứ tự chúng được đặt ra. Hộp 1 là một thông điệp chào mừng.

Bất kỳ ý tưởng về cách tốt nhất để đi với điều này?

Đối với Bootstrap 3:

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

Đối với Bootstrap 2:

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

Xem bản demo trên JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

Giống như các ý kiến ​​gợi ý, giải pháp là sử dụng các nhịp / hàng lồng nhau.

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

Ví dụ dưới đây dường như hoạt động. Chỉ cần đặt chiều cao cho phần tử đầu tiên

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

Tôi không thể không nghĩ rằng đó là việc sử dụng sai một hàng mặc dù.

Tôi tin rằng phần liên quan đến cách kéo dài các hàng đã được trả lời kỹ lưỡng (tức là bằng các hàng lồng nhau), nhưng tôi cũng gặp phải vấn đề về các hàng lồng nhau của mình không làm đầy container của chúng. Trong khi flexbox và lề âm là một tùy chọn, một giải pháp dễ dàng hơn nhiều là sử dụng h-50lớp được xác định trước trên các rowhộp chứa 2, 3, 4 và 5.

Lưu ý: Tôi đang sử dụng Bootstrap-4, tôi chỉ muốn chia sẻ vì tôi gặp phải vấn đề tương tự và thấy đây là một giải pháp thanh lịch hơn :)

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