Bootstrap kết hợp các hàng (rowspan)

Tôi đang thử nghiệm Twitter Bootstrap và bị mắc kẹt với giàn giáo cơ bản với các hàng. Tôi đã xem lại số lần tài liệu của họ và tôi có thể thấy các cột lồng trong đó về cơ bản bạn có thể lồng các cột trong một cột nhưng tôi không thể xác định khả năng kết hợp các hàng thành một và có liên kết với cột bên cạnh các hàng không có tổ chức.

Dưới đây hình ảnh nên minh họa những gì tôi muốn thực hiện.

Giải pháp khắc phục duy nhất tôi gặp phải là sử dụng bảng nhưng tôi không thích ý tưởng này vì quan điểm của tôi là khả năng đáp ứng sẽ không hoạt động với việc sử dụng bảng.

Có ai có bất kỳ giải pháp thanh lịch cho điều này? Hầu hết các bố cục web tôi làm sẽ cần mức độ linh hoạt tốt vì vậy sẽ thật tuyệt nếu tôi có thể chọn thứ gì đó hữu ích ở đây.

Divs xếp theo chiều dọc theo mặc định, do đó không cần xử lý đặc biệt các "hàng" trong một cột.

div {
  height:50px;
}
.short-div {
  height:25px;
}

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

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

Đây là câu đố .

Bạn nên sử dụng lồng bootstrap.

Xem Bootstrap 3 hoặc Bootstrap 4 :

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(Trong Fiddle màn hình, phóng to màn hình thử nghiệm của bạn để xem kết quả, bởi vì tôi đang sử dụng col- md - *, sau đó ngăn xếp đáp ứng các cột)

Lưu ý : Tôi không chắc chắn rằng BS2 cho phép các cột lồng nhau , nhưng trong câu trả lời của Paul Keister, các cột lồng nhau không được sử dụng. Bạn nên sử dụng nó và tránh để phát minh lại css trong khi bootstrap làm tốt.

Chiều cao cột là tự động, nếu bạn thêm một dòng thứ hai (như tôi làm trong ví dụ của tôi), chiều cao cột sẽ tự điều chỉnh.

Lưu ý: Điều này là dành cho Bootstrap 2 (có liên quan khi câu hỏi được hỏi).

Bạn có thể thực hiện điều này bằng cách sử dụng row-fluidđể tạo một hàng dựa trên chất lỏng (phần trăm) bên trong một hàng hiện có block.

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

Đây là một ví dụ về JSFiddle .

Tôi đã nhận thấy rằng có một lề trái kỳ lạ xuất hiện (hoặc không xuất hiện) cho các nhịp bên trong row-fluidsau khoảng đầu tiên. Điều này có thể được khắc phục bằng một tinh chỉnh CSS nhỏ (đó là cùng một CSS được áp dụng cho đứa trẻ đầu tiên, được mở rộng cho những đứa trẻ đã qua đứa trẻ đầu tiên):

.row-fluid [class*="span"] {
    margin-left: 0;
}

Kiểm tra cái này Hy vọng nó sẽ giúp đầy đủ cho bạn.

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}

Câu trả lời của Paul dường như đánh bại mục đích của bootstrap; đó là phản ứng với kích thước màn hình / màn hình.

Bằng cách lồng các hàng và cột, bạn có thể đạt được kết quả tương tự, trong khi vẫn duy trì khả năng phản hồi.

Đây là một phản ứng cập nhật cho vấn đề này;

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>

Bạn có thể xem codepen ở đây.