колонка ниже eachother

Я не могу понять, почему мой col4 идет ниже eachother, а не в строке. Секции 1 и 2 должны быть рядом друг с другом. Я попытался определить всю ширину столбца в моем css. Что мне здесь не хватает?колонка ниже eachother

Fiddle

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. Вы в значительной степени переписываете то, что уже делают эти рамки. –

Но если я хочу установить свои контрольные точки вручную, все в порядке? Я просто устал от использования бутстрапа, поэтому я хотел научиться устанавливать свои собственные контрольные точки. – McDuck4

ответ

Смежные вопросы