Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[Bootstrap] Mình gặp vấn đề với Grid system trong HTML

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi Buu Tran, 9/1/16.

Lượt xem: 1,854

  1. Buu Tran Mới đăng kí

    Chào các bạn, hiện tại mình đang tập dùng bootstrap, mình gặp vấn đề như hình sau :
    Như hình và đoạn CODE bên dưới, mình muốn chèn ảnh có width = col-lg-4 và Phần mô tả có width = col-lg-5
    vào div class="content" , bên ngoài mình đã tạo ra div.col-lg-9 nên mình bị gặp trục trặc ở việc khai báo tên grid, mình có 2 phương án khai báo, mong các bạn xem giúp mình : #:-s
    1) Tạo trong
    div class="content" các div.col-lg-4 và div.col-lg-5, sau đó chèn thẻ IMG và nội dung như bình thường.
    2) Không khai báo các div.col-lg-4 và div.col-lg-5, chèn thẻ IMG và nội dung vào các div được quy định sẵn độ dài bằng thuộc tính
    style="width: ...px;"
    ...
    P/S : Mình có chèn code dưới cuối bài để các bạn Copy Paste cho tiện nhé, cảm ơn các bạn.
    ...
    fzrco30.jpg
    yljuTtS.jpg
    Code:
    <div class="container-fluid">
        <div class="row">
            <div class="main">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-9">
                            <div class="content">
                               <!-- Nội dung content ở đây -->
                            </div>
                        </div><!-- end col-lg-9 -->
                        <div class="col-lg-3">
                            <div class="sidebar">
                               <!-- Nội dung sidebar ở đây -->
                            </div>
                        </div><!-- end col-lg-3 -->
                    </div><!-- end row -->
                </div><!-- end container -->
            </div><!-- end main -->
        </div><!-- end row -->
    </div>

    ...
    Chỉnh sửa lần cuối: 9/1/16
  2. moi_htn

    moi_htn Mới đăng kí

    Đầu tiên mình thấy bạn design như vậy là không thể dùng theo grid bootstrap được tại vì nếu bên trong col 9 theo như design là đang dùng col 4 và col 5 của container lớn bên ngoài. trong khi nếu muốn tạo grid bên trong col 9 bạn phải thêm vào 1 container-fluid mà grid bootstrap là 12 cột chứ không phải 9 cột.
    Ở điểm này thì theo mình có nhiều cách để giải quyết:
    1 - Đổi design, đề nghị designer chia lại trong phần grid đó có thể dùng 3/6 thay vì 4/5 (nếu là 3/6 thì chắc bạn biết cách giải quyết rồi cho 1 container-fluid bên trong là col4 và col8)
    2 - Không dùng grid của bootstrap bạn làm 2 div và dùng tỉ lệ % để chia 2 div đó theo đúng design.
    3 - Đổi cấu trúc html của bạn lại theo như này, nhưng khuyết điểm là nếu sidebar nội dung ngắn sẽ có bug.
    codepen.io/thiennhat/pen/VebBeK
    Mình khuyến khích dùng cách 1,2.
    Amonstyle thích bài viết này
  3. Buu Tran

    Buu Tran Mới đăng kí

    OK moi_htn ... Mình đã nhờ design lại phần thumb của post-section, tỉ lệ 3-6

Ủng hộ diễn đàn