самонастройки основной сетке

Question

В попытке узнать адаптивный веб-дизайн, я учу себя как проектировать с начальной загрузки. Я создал базовую сетку; код для сетки показан ниже.

HTML:

<div class="row"> 
    <div class="span6 red01">span6</div> 
    <div class="span6 green01">span6</div> 
</div> 

CSS:

body { padding: 0px; } 
.red01 { background: #ff0000; } 
.green01 { background: #00ff00; } 

Я вижу две дивы на моей веб-странице, но моя проблема в том, как они выровнены. Я бы хотел выровнять их по горизонтали на экране моего ноутбука. Я пробовал заниматься этим, но не могу заставить его работать. Может ли кто-нибудь прокомментировать их опыт?

Answer 1

Пожалуйста, проверьте это JSfiddle for you

Смотрите результат здесь Result of 2 col

<div class="container"> 
     <div class="row"> 
      <div class="span12"> 
      <h1>Bootstrap 12 col spanning full page</h1> 
    </div> 
      <div class="span6"> 
       <p> Paragraph test col1</p> 
     </div> 
     <div class="span6"> 
       <p> Paragraph test col2.</p> 
     </div> 
     </div> 
    </div> 

.container class -> Его обертка с фиксированной шириной, предопределенной в bootstrap.css.

.container-fluid -> который является обертка Fluid

.row -> Этот класс построен, чтобы содержать ряд колонн. Каждая новая строка создает новую зону для размещения столбцов по желанию.