我正在用Bootstrap的網(wǎng)格系統(tǒng)進(jìn)行布局。 我目前有這樣的東西:
<div class="container">
<div class="col-xs-8">...</div>
<div class="col-xs-4">...</div>
</div>我實(shí)際上想要實(shí)現(xiàn)的是第二列占據(jù)剩余的可用水平空間，即第二列的行為就像它在流體容器中一樣，但是第一列的行為仍然像在固定容器中一樣。
我嘗試使用:after偽選擇器引入一個出現(xiàn)在第二列旁邊的塊(這是可以的，因?yàn)椤叭珜捔小奔兇馐菫榱嗣烙^)，但是我無法讓它占據(jù)所有空間。
如果任何人有任何關(guān)于如何以一種好的方式實(shí)現(xiàn)這一點(diǎn)的想法，那將是非常感謝的。
編輯:讓事情看起來更直觀一些:
紅色塊是我目前擁有的(寬度為4的列)，綠色塊是我希望在那里的。
我已經(jīng)找到了一個優(yōu)雅的解決方案。 包裝容器類用于改變其下容器的行為，而不是全局改變。
同樣，margin-right: 0用于設(shè)置容器流體從右邊開始，你可以使用margin-left: 0設(shè)置它流體到另一邊。
名詞（noun的縮寫）b:如果容器沒有到達(dá)屏幕的邊緣，只需移除列中的填充。
@media (min-width:768px) {
.YourWrappingContainerClass .container {
width: calc(((100% - 750px) / 2) + 750px) !important;
margin-right: 0;
}
}
@media (min-width:992px) {
.YourWrappingContainerClass .container {
width: calc(((100% - 970px) / 2) + 970px) !important;
margin-right: 0;
}
}
@media (min-width:1200px) {
.YourWrappingContainerClass .container {
width: calc(((100% - 1170px) / 2) + 1170px) !important;
margin-right: 0;
}
}引導(dǎo)容器容器-流體css
如果您使用bootstrap的SASS，則可選擇以下解決方案:
// Custom mixin to generate container-fluid-left and container-fluid-right (fluid on the left/right and normal max width on the other)
// For each breakpoint, define the maximum width of the container in a media query
@mixin make-container-fluid-side-max-widths($side, $max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
margin-#{$side}: 0;
padding-#{$side}: 0;
.row{
margin-#{$side}: 0;
}
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto{
padding-#{$side}: 0;
}
@each $breakpoint, $container-max-width in $max-widths {
@include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: calc( 100% - (100% - #{$container-max-width}) / 2 );
}
}
}
.container-fluid-left {
@include make-container();
@include make-container-fluid-side-max-widths('left');
}
.container-fluid-right {
@include make-container();
@include make-container-fluid-side-max-widths('right');
}生成兩個類-容器-流體-左側(cè)和容器-流體-右側(cè)-這將是左側(cè)/右側(cè)的流體，并且只在另一側(cè)與普通容器相同的空間上復(fù)制。
你所需要做的就是將容器的右填充設(shè)置為0，并覆蓋bootstrap在其上設(shè)置的最大寬度。
.container {
padding-right: 0px;
max-width: none;
}演示
編輯:您可以嘗試的另一個解決方案是:
.container {
padding-left: 0px;
padding-right: 0px;
margin-right: 0px;
max-width: none;
}新演示
演示:http://jsbin.com/titik/1/
超文本標(biāo)記語言
<div class="container">
<div class="col-xs-8">Content</div>
<div class="col-xs-4"><div class="well">Words go in here words go in here Words go in here words go in here Words go in here words go in here Words go in here words go in here Words go in here words go in here </div></div>
</div>半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)
body {overflow-x:hidden}
.well {
z-index: 3;
border: 0px;
background: red;
position: relative;
}
.well:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left:80%;
right:-3000px;
background: red;
z-index: -1;
}此代碼將工作屏幕大小限制在1200px以上。僅在大于1200px的設(shè)備中檢查此代碼。如果設(shè)備尺寸小于1200像素，布局是正常的演示
.main-box {
background-color: #ccc;
}
.col-sm-6 {
height: 50px;
}
.first-col {
background-color: #f4b334;
}
@media only screen and (min-width: 1200px) {
.first-col {
padding-left: calc((100% - 1160px) / 2);
/* 1160px is your container width or web width*/
}
}<link rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container-fluid main-box">
<div class="row">
<div class="col-sm-6 first-col">
<h2>Hello World</h2>
<p>this is example text</p>
</div>
<div class="col-sm-6">
</div>
</div>
</div>這會將0的邊距應(yīng)用于除左側(cè)之外的所有邊，左側(cè)設(shè)置為自動。然后，為了使第二列緊靠右側(cè)，請移除填充。
演示
我也在糾結(jié)同樣的事情。我現(xiàn)在做了一個版本，適用于左邊1/3欄和右邊2/ 3 +全寬欄。如果時(shí)間允許，我可以在所有顏色選項(xiàng)的基礎(chǔ)上添加所有選項(xiàng)。
我所做的是使用100vw和扣除(與SASS變量)固定的寬度和一半，以增加左邊距，并在右手邊0邊距。我將列分成1/3和2/3 +頁邊空白:
.container-fluid-right {
width:calc(100vw - 30px) !important;
overflow-x:visible;
padding-left:0px;
padding-right:0px;
> .row > :first-child {
padding-left:15px;
padding-right:15px;
}
> .row > :last-child {
padding-right:0px;
padding-left:0px;
float:right;
margin-right: 0px;
}
@include when-sm {
> .row > :first-child {
width:calc(#{$screen-sm-min} * 1 / 3);
margin-left: calc((100vw - #{$screen-sm-min}) / 2);
}
> .row > :last-child {
width:calc((#{$screen-sm-min} * 2 / 3) +((100vw - #{$screen-sm-min}) / 2));
}
}
@include when-md {
> .row > :first-child {
width:calc(#{$screen-md-min} * 1 / 3);
margin-left: calc((100vw - #{$screen-md-min}) / 2);
}
> .row > :last-child {
width:calc((#{$screen-md-min} * 2 / 3) +((100vw - #{$screen-md-min}) / 2));
}
}
@include when-lg {
> .row > :first-child {
width:calc(#{$screen-lg-min} * 1 / 3);
margin-left: calc((100vw - #{$screen-lg-min}) / 2);
}
> .row > :last-child {
width:calc((#{$screen-lg-min} * 2 / 3) +((100vw - #{$screen-lg-min}) / 2));
}
}
}我用了另一張海報(bào)上的when-sm / when-md / when-lg，這些是混音:
@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }對于原來的海報(bào)布局(8左4右)，唯一的區(qū)別將是交換1/3和2/3左右
我也有同樣的問題，并決定跳過。整個容器類。我創(chuàng)建了一個名為。僅容器-像這樣離開
.container-only-left {
margin-left: calc(50% - 255px);
@media (min-width: 768px) {
margin-left: calc(50% - 345px);
}
@media (min-width: 992px) {
margin-left: calc(50% - 465px);
}
@media (min-width: 1200px) {
margin-left: calc(50% - 555px);
}
}只要。僅容器-左類被放在一個覆蓋100vw的元素中，這對我有效。
Bootstrap 5的版本，如果您使用預(yù)編譯的CSS。向https://stackoverflow.com/a/64542602/1096128致敬
.container-fluid-right {
margin-right: 0;
padding-right: 0;
.row{
margin-right: 0;
> [class*=' col-']:last-child,
> [class^='col-']:last-child{
padding-right: 0;
}
}
}
@media (min-width: 576px) {
.container-fluid-right {
max-width: calc( 100% - (100% - 540px) / 2 );
}
}
@media (min-width: 768px) {
.container-fluid-right {
max-width: calc( 100% - (100% - 720px) / 2 );
}
}
@media (min-width: 992px) {
.container-fluid-right {
max-width: calc( 100% - (100% - 960px) / 2 );
}
}
@media (min-width: 1200px) {
.container-fluid-right {
max-width: calc( 100% - (100% - 1200px) / 2 );
}
}
@media (min-width: 1400px) {
.container-fluid-right {
max-width: calc( 100% - (100% - 1320px) / 2 );
}
}https://codepen.io/sawacrow/pen/Jjmvydx
<div class="container-fluid-sticky-right bg-success"><h1>sticky right container</h1></div>
<div class="container "><h1>normal container</h1></div>
<div class="container-fluid-sticky-left bg-warning"><h1>sticky left container</h1></div>射流研究…
function containerFluidder() {
var container = document.querySelector('.container');
var distanceFromWindow = container.offsetLeft;
var containerStyles = window.getComputedStyle(container);
var paddingOneSide = parseInt(containerStyles.paddingLeft)
distanceFromWindow = distanceFromWindow + paddingOneSide;
document.querySelectorAll('.container-fluid-sticky-left').forEach((el) => {
el.style.marginRight = distanceFromWindow + 'px';
});
document.querySelectorAll('.container-fluid-sticky-right').forEach((el) => {
el.style.marginLeft = distanceFromWindow + 'px';
});
}
containerFluidder();
//add event listener to window resize and call containerFluidder
window.addEventListener('resize', containerFluidder);