自舉網格：流體到「一側」

我正在使用Bootstrap的網格系統進行佈局。我現在有這樣的事情：自舉網格：流體到「一側」

<div class="container"> 
    <div class="col-xs-8">...</div> 
    <div class="col-xs-4">...</div> 
</div>

我真正想要實現的是第二列佔用水平的剩餘空間可用，即第二列的行爲就好像它是一個流體容器但第一列的行爲仍然像在一個固定的容器中一樣。

我試過使用：僞選擇器來引入第二列旁邊的塊（這將是好的，因爲「全寬列」 - 純粹是出於美觀的原因），但我couldn不要讓它佔用全部空間。

如果任何人有任何想法如何以良好的方式實現這一點，那將非常感激。

編輯：使事情多一點視覺： An example of what I want to achieve

紅塊，是我目前有（寬4列）中，綠色塊是希望我在那裏。

來源

2014-07-25 Mathijs

我不明白您的問題：http://jsfiddle.net/DTcHh/680/ – Tricky12

問題是，在較大的屏幕上，右列的右側不會伸展到屏幕的右側邊緣。 – Mathijs

enter image description here

DEMO：http://jsbin.com/titik/1/

HTML

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

CSS

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

來源

2014-07-25 13:38:46 Christina

好吧，只是做一個非常廣泛的：後元素確實工作，但我覺得它是一個醜陋的解決方案。它導致頁面變得非常寬泛，我知道這是可以解決的溢出：隱藏，但... meh。 – Mathijs

你會看到，如果你打算使用Bootstrap的容器並且有一個餘裕：auto，margin-right：auto，那麼這就是交易。 – Christina

是的，不幸的是，恐怕這是實現我想要的唯一可行的方式。 – Mathijs

.container { 
    margin: 0 0 0 auto; 
    padding-right: 0; 
    }

這適用於除了左側，其設置爲自動的所有方面的邊距爲0。然後讓第二列對着右手邊去除填充物。

Demo

來源

2014-07-25 12:32:37 Zac

這將整個容器移動到頁面的右側，而我希望容器的左邊緣保持在同一位置，而右邊緣則伸展到頁面的右邊緣。 – Mathijs

所有你需要做的是設置容器的右填充爲0，覆蓋最大寬度是引導穿上它。

.container { 
    padding-right: 0px; 
    max-width: none; 
}

Demo

編輯：還有一個解決方案，您可以嘗試是這樣的：

.container { 
    padding-left: 0px; 
    padding-right: 0px; 
    margin-right: 0px; 
    max-width: none; 
}

New Demo

來源

2014-07-25 13:25:06 Tricky12

這似乎與Bootstrap 3.0.0，但不再與3.2.0。 – Mathijs

@Mathijs奇怪的是，他們從3.0變成了3.2。更新了我的答案。 – Tricky12

寬度：初始值使容器變爲全寬度，因此可以有效地將容器變成容器流體。這會導致左列展開到頁面的左側，這是不可取的。 – Mathijs

我同樣的事情，努力爲好。我現在製作了一個版本，適用於左側1/3列和右側2/3+全寬列。如果剩下時間，我可以根據所有選項添加所有選項。

我所做的就是使用100vw並扣除（用SASS變量）固定寬度和一半的這個添加到左邊距，並在右邊0 marging。列我分成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)); 
     } 
    } 
}

我使用時-SM /時-MD /時-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; } }

對於原來的海報佈局（8左4右）唯一的區別是切換1/3和2/3左右

來源

2017-01-08 08:02:15 morksinaanab

自舉網格：流體到「一側」

回答

相關問題