Tôi muốn tạo các khối màu 100% xen kẽ. Một tình huống "lý tưởng" được minh họa như một phần đính kèm, cũng như tình huống hiện tại.
Thiết lập mong muốn:
Hiện tại:
Ý tưởng đầu tiên của tôi là tạo một lớp div, tạo màu nền cho nó và cung cấp cho nó 100% chiều rộng.
.block {
width: 100%;
background: #fff;
}
Tuy nhiên, bạn có thể thấy rằng điều này rõ ràng là không hiệu quả. Nó được giới hạn trong một khu vực container. Tôi đã cố gắng đóng thùng chứa và điều đó cũng không hoạt động.
<div class="container"> <div class="row"> <div class="span12"><img src="img/logo.png" width="960px"></center></div> <div class="block">content</div>
Câu trả lời:
Các containerlớp học là cố ý không phải là 100% chiều rộng. Đó là các chiều rộng cố định khác nhau tùy thuộc vào chiều rộng của khung nhìn.
Nếu bạn muốn làm việc với toàn bộ chiều rộng của màn hình, hãy sử dụng .container-fluid:
Bootstrap 3:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
</body>
Bootstrap 2:
<body>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span8"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="span12"></div>
</div>
</body>
container-fluidnày sẽ gây ra thanh cuộn ngang. Để sửa lỗi này, hãy thêm cái này vào bảng định kiểu của bạn.container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
Đây là cách bạn có thể đạt được thiết lập mong muốn của mình với Bootstrap 3 :
<div class="container-fluid">
<div class="row"> <!-- Give this div your desired background color -->
<div class="container">
<div class="row">
<div class="col-md-12">
... your content here ...
</div>
</div>
</div>
</div>
</div>
Phần này container-fluidđảm bảo rằng bạn có thể thay đổi nền trên toàn bộ chiều rộng. Phần containerđảm bảo rằng nội dung của bạn vẫn được bao bọc trong một chiều rộng cố định.
Cách tiếp cận này hoạt động, nhưng cá nhân tôi không thích tất cả các lồng. Tuy nhiên, tôi vẫn chưa tìm ra giải pháp tốt hơn cho đến nay.
.container s.containerbạn muốn để có nền có chiều rộng đầy đủ trongdivFiddles: Đơn giản: https://jsfiddle.net/vLhc35k4/ , Đường viền vùng chứa: https://jsfiddle.net/vLhc35k4/1/
HTML:
<div class="container">
<h2>Section 1</h2>
</div>
<div class="specialBackground">
<div class="container">
<h2>Section 2</h2>
</div>
</div>
CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }
Nhiều người sẽ ( sai ) đề xuất rằng bạn nên sử dụng các thùng chứa lồng nhau.
Chà, bạn KHÔNG nên .
Chúng không được nhắc đến để lồng vào nhau. (Xem phần " Vùng chứa " trong tài liệu)
divlà một phần tử khối, theo mặc định kéo dài đến toàn bộ chiều rộng của nội dung tài liệu - có tính năng toàn chiều rộng. Nó cũng có chiều cao của nội dung (nếu bạn không chỉ định khác).
Các vùng chứa bootstrap không bắt buộc phải là con trực tiếp của một phần thân, chúng chỉ là các vùng chứa có một số phần đệm và có thể là một số chiều rộng cố định có thể thay đổi chiều rộng màn hình.
Nếu một lưới cơ bản .containercó một số chiều rộng cố định, nó cũng được căn giữa theo chiều ngang.
Vì vậy, không có sự khác biệt cho dù bạn đặt nó là:
div là con trực tiếp của một cơ thể.Theo "cơ bản", divý tôi là divkhông có CSS thay đổi đường viền, phần đệm, kích thước, vị trí hoặc kích thước nội dung. Thực sự chỉ là một phần tử HTML với display: block;CSS và có thể là nền.
Nhưng tất nhiên thiết lập CSS giống như chiều dọc (chiều cao, padding-top, ...) không được phá vỡ lưới bootstrap :-)
... Trên trang web riêng của nó và trong ví dụ "JUMBOTRON":
http://getbootstrap.com/examples/jumbotron/
Có một cách giải quyết bằng cách sử dụng vw. Rất hữu ích khi bạn không thể tạo một thùng chứa chất lỏng mới. Điều này, bên trong một div 'container' cổ điển sẽ có kích thước đầy đủ.
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
Sau đó, có sự cố thanh bên (nhờ @Typhlosaurus), được giải quyết bằng hàm js này, gọi nó khi tải tài liệu và thay đổi kích thước:
function full_row_resize(){
var body_width = $('body').width();
$('.row-full').css('width', (body_width));
$('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
return false;
}
Trong bootstrap 4, bạn có thể sử dụng lớp 'w-100' (w là chiều rộng và 100 là 100%)
Bạn có thể tìm tài liệu tại đây: https://getbootstrap.com/docs/4.0/utilities/sizing/
Nếu bạn không thể thay đổi bố cục HTML:
.full-width {
width: 100vw;
margin-left: -50vw;
left: 50%;
}
<div class="container">
<div class="row">
<div class="col-xs-12">a</div>
<div class="col-xs-12">b</div>
<div class="col-xs-12 full-width">c</div>
<div class="col-xs-12">d</div>
</div>
</div>
Thay vì
style="width:100%"
thử sử dụng
class="col-xs-12"
nó sẽ giúp bạn tiết kiệm 1 ký tự :)
.containerdiv bên ngoài , nhưng nó không giống với chiều rộng đầy đủ của trang trong trình duyệt, đó là điều mà câu hỏi đang đặt ra.
Đôi khi không thể đóng vùng chứa nội dung. Giải pháp chúng tôi đang sử dụng có một chút khác biệt nhưng ngăn chặn tràn vì kích thước thanh cuộn của firefox!
.full-width {
margin-top: 15px;
margin-bottom: 15px;
position: relative;
width: calc(100vw - 10px);
margin-left: calc(-50vw + 5px);
left: 50%;
}
Đây là một ví dụ: https://jsfiddle.net/RubbelDeKatz/wvt9253q
Xin lỗi, cũng nên yêu cầu css của bạn. Như vậy, về cơ bản những gì bạn cần xem xét là tạo kiểu cho vùng chứa của bạn .container { width: 100%; }trong css của bạn và sau đó các div kèm theo sẽ kế thừa điều này miễn là bạn không cung cấp cho chúng chiều rộng riêng của chúng. Bạn cũng thiếu một vài thẻ đóng và các thẻ </center>đóng<center> mà nó không bao giờ được mở, ít nhất là trong phần mã này. Tôi không chắc bạn muốn hình ảnh trong cùng một div chứa nội dung của bạn hay riêng biệt, vì vậy tôi đã tạo hai ví dụ. Tôi đã thay đổi chiều rộng của img thành 100px chỉ vì jsfiddle cung cấp một vùng xem nhỏ. Hãy cho tôi biết nếu đó không phải là thứ bạn đang tìm kiếm.
nội dung và hình ảnh riêng biệt: http://jsfiddle.net/QvqKS/2/
nội dung và hình ảnh trong cùng một div (img nổi bên trái): http://jsfiddle.net/QvqKS/3/
Tôi tự hỏi tại sao ai đó lại cố gắng "ghi đè" chiều rộng vùng chứa, vì mục đích của nó là giữ nội dung của nó với một số phần đệm, nhưng tôi đã gặp trường hợp tương tự (đó là lý do tại sao tôi muốn chia sẻ giải pháp của mình, mặc dù đã có câu trả lời ).
Trong tình huống của tôi, tôi muốn có tất cả nội dung (của tất cả các trang) được hiển thị bên trong một vùng chứa, vì vậy đây là đoạn mã từ _Layout.cshtml của tôi:
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
<div class="container">
@RenderBody()
</div>
</section>
</div>
Trong trang Chỉ mục trang chủ của tôi, tôi có một hình ảnh tiêu đề nền mà tôi muốn lấp đầy toàn bộ chiều rộng màn hình , vì vậy giải pháp là tạo Index.cshtml như sau:
@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
<div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}
<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
<div class="container">
<div class="row">
MORE CONTENT
</div>
</div>
</div>
Tôi nghĩ rằng điều này tốt hơn là cố gắng giải quyết, vì các phần được tạo với mục đích cho phép (hoặc buộc) các chế độ xem thay thế động một số nội dung trong bố cục.
Mặc dù mọi người đã đề cập rằng bạn sẽ cần sử dụng .container-liquid trong trường hợp này nhưng bạn cũng sẽ phải xóa phần đệm khỏi bootstrap.
Câu trả lời sau đây không phải là tối ưu chính xác theo bất kỳ biện pháp nào, nhưng tôi cần một thứ gì đó duy trì vị trí của nó trong vùng chứa trong khi nó kéo giãn div bên trong hoàn toàn.
https://jsfiddle.net/fah5axm5/
$(function() {
$(window).on('load resize', ppaFullWidth);
function ppaFullWidth() {
var $elements = $('[data-ppa-full-width="true"]');
$.each( $elements, function( key, item ) {
var $el = $(this);
var $container = $el.closest('.container');
var margin = parseInt($container.css('margin-left'), 10);
var padding = parseInt($container.css('padding-left'), 10)
var offset = margin + padding;
$el.css({
position: "relative",
left: -offset,
"box-sizing": "border-box",
width: $(window).width(),
"padding-left": offset + "px",
"padding-right": offset + "px"
});
});
}
});