列低於eachother

我不明白爲什麼我的col4正在低於其他人，而不是連續。 Sec 1和Sec 2應該在彼此旁邊。我試圖在我的css中定義所有列寬。我在這裏錯過了什麼？列低於eachother

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>| Fishing |</title> 
    <link type="text/css" rel="stylesheet" href="css/build.css"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 

<body> 
    <div class="main-header" role="main"> 

    </div> 
    <div class="row"> 
     <div class="col12"> 
      <h2>Report</h2> 
     </div> 
    </div> 
    <div class="row" role="section"> 
     <div class="col4"> 
      <h4>Sec 1</h4> 
     </div> 
     <div class="col4" role="section"> 
      <h4>Sec 2</h4> 
     </div> 
    </div> 

</body> 
</html>

CSS

html, body { 
     margin: 0px; 
     padding: 0px; 
     font-size: 40px; 
    } 

    .main-header { 
     background: url(../img/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     height: 500px; 
     margin-bottom: 20px; 
     overflow: hidden; 
    } 

    /* Rows */ 
    .row{ 
     margin-left:-15px; 
     margin-right:-15px; 
    } 
    .row{:after{ 
     content:''; 
     display:block; 
     clear:both 
    } 
    /* General properties of columns */ 
    .col{ 
     padding: 0rem; 
     float:left; 
    } 

    /* Column Definition */ 
    .col1{ 
     width:8.33333333% 
    } 

    .col2{ 
     width:16.66666667% 
    } 

    .col3{ 
     width:25% 
    } 

    .col4{ 
     width:33.33333333% 
    } 

    .col5{ 
     width:14.666667% 
    } 

    .col6{ 
     width:50%; 
    } 

    .col7{ 
     width:58.33333333% 
    } 

    .col8{ 
     width:66.6666667% 
    } 

    .col9{ 
     width:75% 
    } 

    .col10{ 
     width:83.33333333% 
    } 

    .col11{ 
     width:91.6666666% 
    } 
    .col12{ 
     width:100%; 
    }

來源

2016-04-17 McDuck4

首先，你有一個語法錯誤：

.row{:after{ 
    content:''; 
    display:block; 
    clear:both 
}

應該是：

.row:after{ 
    content:''; 
    display:block; 
    clear:both 
}

此外，您定義的樣式.col，但他們不會被應用到列，因爲他們需要有col類附加到他們col4類，如：

<div class="col col4"> 
    <h4>Sec 1</h4> 
</div>

來源

2016-04-17 00:41:25 denat

當然好了，謝謝。嗯，它在引導過程中靠得很近。我只是想這樣我會對我的網格產生一些影響。你會同意嗎，還是現在我更加硬編碼？ – McDuck4

如果你只是打算建立一個網格，我會簡單地引用Bootstrap或Foundation。你幾乎重寫了這些框架已經做的事情。 –

但是，如果我想手動設置我的斷點，那沒問題吧？我只是厭倦了使用bootstrap，所以我想學習設置自己的斷點。 – McDuck4

列低於eachother

回答

相關問題