引導排系統克隆

我想克隆我自己的自舉電網系統，但似乎我遇到了一個問題，我解決不了：引導排系統克隆

這是我的html：

 <div class="row"> 
      <div class="col-5"> 
       <div class="card"> 
        <div class="card-content">Card</div> 
       </div> 
      </div> 
      <div class="col-5"> 
       <div class="card card-rounded"> 
        <div class="card-content">Card-rounded</div> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-10"> 
       <div class="card card-noshadow"> 
        <div class="card-content">Card-noshadow</div> 
       </div> 
      </div> 
     </div>

的這是它背後的CSS：

.row { 
margin-right: -15px; 
    margin-left: -15px; 
} 

*[class^="col-"] { 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
    background-color: #f00; 
} 

.col-10 { width: 100% } 
.col-9 { width: 90% } 
.col-8 { width: 80% } 
.col-7 { width: 70% } 
.col-6 { width: 60% } 
.col-5 { width: 50% } 
.col-4 { width: 40% } 
.col-3 { width: 30% } 
.col-2 { width: 20% } 
.col-1 { width: 10% }

這些都是全局CSS設置：

box-sizing: border-box

我還使用normalize.css。

的問題是，這兩個col-5列不在線顯示。任何幫助？

編輯

好吧我明白了：

我只好一個float: left添加到「山坳-'-類。

來源

2015-07-12 Ricardo Boss

你COL-5具有50％的寬度，即不包括填充和可選的邊界等，所以2次50％= 100％的寬度+填充的結果比你有更多的寬度的寬度。

可以添加box-sizing: border-box;到包括在寬度計算這些屬性。

===編輯答案===使用

箱尺寸。你需要添加一個float: left到你的cols。

來源

2015-07-12 12:23:55 Stefan

如你我已經使用邊界框中看到。 –

對不起，你能分享一個鏈接到全面的例子嗎？ – Stefan

https://jsfiddle.net/78y2r0tx/ –

你所缺少的是對所有col類浮動。我認爲這是你正在尋找的。

*[class^="col-"] { 
 
    position: relative; 
 
    min-height: 1px; 
 
    background-color: #f00; 
 
    float: left; 
 
    padding: 0 15px; 
 
    box-sizing: border-box; 
 
} 
 

 
.col-10 { width: 100% } 
 
.col-9 { width: 90% } 
 
.col-8 { width: 80% } 
 
.col-7 { width: 70% } 
 
.col-6 { width: 60% } 
 
.col-5 { width: 50% } 
 
.col-4 { width: 40% } 
 
.col-3 { width: 30% } 
 
.col-2 { width: 20% } 
 
.col-1 { width: 10% }

<div class="row"> 
 
    <div class="col-5"> 
 
     <div class="card"> 
 
      <div class="card-content">Card</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-5"> 
 
     <div class="card card-rounded"> 
 
      <div class="card-content">Card-rounded</div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-10"> 
 
     <div class="card card-noshadow"> 
 
      <div class="card-content">Card-noshadow</div> 
 
     </div> 
 
    </div> 
 
</div>

不過說實話，豈不是一個更好的主意只是建立從引導源電網？只需獲取git repo並使用grunt構建網格，排除與網格系統無關的所有較少文件。看看編譯後的CSS，你會發現，bootstraps網格系統比你想象的要多得多。

來源

2015-07-12 13:01:06 DavidDomain

引導排系統克隆

回答

相關問題