Hàng lồng nhau với hệ thống lưới bootstrap?

194

Tôi muốn 1 hình ảnh lớn hơn với 4 hình ảnh nhỏ hơn ở định dạng 2x2 như thế này:

Hình 1 Ví dụ

Suy nghĩ ban đầu của tôi là sắp xếp mọi thứ trong một hàng. Sau đó tạo hai cột và trong cột thứ hai, tạo hai hàng và hai cột để tạo hiệu ứng 1x1 và 2x2.

Tuy nhiên, điều này dường như là không thể, hoặc tôi chỉ không làm đúng?

— Greg
nguồn

Vui lòng gửi HTML / CSS mà bạn đã thử cho đến nay.

— Steve Sanders

Hãy thử điều này: jsfiddle.net/KXje2/9 Tôi đã chỉnh sửa fiddle của mình để phù hợp với màn hình lớn thông qua các màn hình nhỏ.

— Phật giáo

Đã làm công việc mã trên cho bạn ...?

— BuddhistBeast

298

Phiên bản Bootstrap 3.x

Như mọi khi, hãy đọc tài liệu tuyệt vời của Bootstrap:

Tài liệu 3.x : https://getbootstrap.com/docs/3.3/css/#grid-nesting

Hãy chắc chắn rằng hàng cấp cha mẹ nằm trong một .containerphần tử. Bất cứ khi nào bạn muốn lồng các hàng, chỉ cần mở một .rowbên trong cột mới của bạn.

Đây là một bố cục đơn giản để làm việc từ:

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

Phiên bản Bootstrap 4.0

Tài liệu 4.0 : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

Đây là phiên bản cập nhật cho 4.0, nhưng bạn thực sự nên đọc toàn bộ phần tài liệu trên lưới để bạn hiểu cách tận dụng tính năng mạnh mẽ này

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

Bản trình diễn trong Fiddle jsFiddle 3.x | jsFiddle 4.0

Sẽ giống như thế này ( với một chút kiểu dáng được thêm vào ):

ảnh chụp màn hình

— KyleMit
nguồn

xin lỗi để chiếm quyền điều khiển 1 năm tuổi, nhưng bạn có biết làm thế nào để có được 0px giữa hình ảnh và 1 và 3

— alex

@alex, chắc chắn - chỉ cần đặt margin: 0;vào .mini-boxphần tử. Ví dụ của tôi chỉ là thêm một cho rõ ràng, nhưng bạn có thể loại bỏ hoàn toàn dòng này. Đây là bản demo

— KyleMit

Tại sao không có hàng giữa col cho minibox 2 và col cho minibox 3? và điều gì sẽ xảy ra nếu có?

— pashute

@pashute, xem lưới Bootstrap 3, có thực sự có bao nhiêu cột trong một hàng không? . Mỗi hộp nhỏ chiếm 50% không gian có sẵn (bị ràng buộc bởi cột), vì vậy hai cái sẽ chiếm hàng đầu tiên. Bất kỳ cái thêm nào sẽ chỉ gói gọn thành một dòng mới. Bạn cũng có thể ghép từng người trong số họ thành hàng, nhưng bạn không cần phải làm vậy. Bootstrap kết thúc tốt đẹp theo mặc định để bạn không phải làm lộn xộn đánh dấu của mình với các hàng mới. Nếu nó có ý nghĩa về mặt ngữ nghĩa, tôi sẽ nói hãy dùng nó. Nhưng nếu bạn chỉ hiển thị danh sách 4 đối tượng, hãy giữ chúng trong cùng một hàng.

— KyleMit

@ user3921890, đó là một chủ đề quá lớn để trả lời trong một dòng bình luận. Bạn có thể đăng một chủ đề mới giải thích những gì bạn đang cố gắng làm và ít nhất một nỗ lực để làm điều đó, và sau đó liên kết đến đó ở đây.

— KyleMit

Thêm vào những gì @KyleMit đã nói, hãy cân nhắc sử dụng:

col-md-* các lớp cho các cột bên ngoài lớn hơn
col-xs-* các lớp cho các cột bên trong nhỏ hơn

Điều này sẽ hữu ích khi bạn xem trang trên các kích cỡ màn hình khác nhau.

Trên màn hình nhỏ, việc bọc các cột bên ngoài lớn hơn sẽ xảy ra trong khi duy trì các cột bên trong nhỏ hơn, nếu có thể

— ezzadeen
nguồn