Tôi đang cố gắng kết hợp một trang web tĩnh bằng Bootstrap 3.0.Nhiều hình nền có độ rộng đầy đủ xếp chồng lên nhau với Bootstrap 3.0

Trang cơ bản là một câu chuyện và bao gồm một loạt các phần được xếp chồng lên nhau với hình nền, có văn bản và hình ảnh/yếu tố khác được phủ lên trên cùng.

I've

Trang chỉ được thiết kế để được cuộn từ trên xuống dưới, và hình nền của từng phần nên choán hết chiều rộng ngang.

Sau đó, tôi cũng sẽ thêm thị sai với các hình ảnh sử dụng Skrollr (https://github.com/Prinzhorn/skrollr).

Tuy nhiên, hiện tại, tôi đang cố gắng để làm việc HTML/CSS với Bootstrap.

Ban đầu, tôi nghĩ tôi có thể làm một cái gì đó như thế này:

<body> 
<div class="container"> 
    <section id="first"> 
     <div class="row annoucement col-md-4 col-md-offset-4"> 
      <h1>The story of...</h1> 
     </div> 
    </section 
    <section id="second"> 
     <div class="row gallery col-md-4 col-md-offset-4"> 
      <!-- Image gallery boxes --> 
     </div> 
    </section 
</div>

và sau đó trong CSS:

#first { 
     background: url(img/1.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    }

Tuy nhiên, những hình ảnh nền không nhìn thấy được - yếu tố #first là 1140px x 0px, vì vậy hình ảnh không hiển thị.

Tôi nghi ngờ tôi không sử dụng đúng loại thẻ - bất kỳ đề xuất nào về cách tôi có thể đưa bố cục ở trên hoạt động với Bootstrap?

Nguồn

2013-09-07 victorhooi

Đánh dấu của bạn cho hệ thống lưới không đúng, bạn nên xem the examples từ tài liệu, về cơ bản là .row phải là phần tử vùng chứa, nếu bạn muốn nền che phủ toàn bộ trang thì bạn không thể có các phần bên trong container, đây là những gì tôi muốn đề nghị:

<body> 
    <section id="first"> 
     <div class="container"> 
      <div class="row announcement"> 
       <div class="col-md-4 col-md-offset-4"> 
        <h1>The story of...</h1> 
       </div> 
      </div> 
     </div> 
    </section> 
    <section id="second"> 
     <div class="container"> 
      <div class="row gallery"> 
       <div class="col-md-4 col-md-offset-4"> 
        <!-- Image gallery boxes --> 
       </div> 
      </div> 
     </div> 
    </section> 
</body>

Mặc dù bạn có thể muốn sử dụng một span size lớn hơn cho nội dung của bạn, bởi vì tôi tin rằng col-md-4 sẽ là quá nhỏ, nhưng đó là dành cho bạn để quyết định :)

Nguồn

2013-09-07 09:00:55

Tuyệt, thật tuyệt, hình ảnh hiển thị ngay bây giờ =). Điều duy nhất là - chiều cao đang được thiết lập bởi các yếu tố bên trong (ví dụ:

Câu chuyện về ...

), thay vì kích thước hình nền, do đó bạn chỉ thấy một dải mỏng của hình ảnh. Có cách nào để hiển thị kích thước dọc hoàn chỉnh của hình nền không? (Nhưng vẫn còn quy mô theo chiều ngang để phù hợp). – victorhooi

trừ khi bạn thiết lập chiều cao của phần với chiều cao của hình ảnh, thông thường bạn sẽ đặt một phần đệm lớn ở trên cùng và dưới cùng của các phần để tăng kích thước của chúng –

Aha, tôi nghĩ có thể có cách phù hợp với hình ảnh theo chiều dọc. Ok, vì vậy tôi có thể đặt 'width' hoặc' padding-bottom' trên #first, để nó sẽ vừa với hình nền đầy đủ. 'width' có vẻ dễ hơn, vì tôi chỉ đặt nó vào ảnh và không cần phải lo lắng về những gì bên trong - tuy nhiên, bạn đang nói rằng tôi nên sử dụng' padding-bottom' để thay thế? – victorhooi

Nhiều hình nền có độ rộng đầy đủ xếp chồng lên nhau với Bootstrap 3.0

Trả lời

Câu chuyện về ...

Các vấn đề liên quan