Как я могу решить мою сетку загрузки?

Question

Я новичок в загрузчике и CSS, и я хочу, чтобы спроектировать этот вывод:

Для этой цели написать это:

<div class="row"> 
     <div class="col-md-12 col-md-1 col-md-4 col-md-8" style="background-color: yellow; width: 100%; height: 100%; position: fixed;"> 
      <nav class="navbar navbar-default navbar-left"> 
       <div class="container"> 
        behzad 
       </div> 
      </nav> 
      <div class="col-md-1"> 

      </div> 
     </div> 
    </div> 

Но это не правильно, как я могу решить это?

Answer 1

Вы не используете загрузчик правильно. Поместите свои определения col в отдельные поля div. Также используйте определения bootstrap xs и md. Наконец, положите ваш row внутри контейнера.

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-3"></div> 
    <div class="col-sm-9"> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
    </div> 
    </div> 
</div> 

Рабочий пример: https://jsfiddle.net/mspinks/zf0q5cLk/3/

Answer 2

Bootstrap следует следовать схеме: container - row - col. Затем используйте -xs (xsmall devices), -sm (небольшие устройства), -md (средние устройства), -lg (большие устройства) для изменения конструкции сетки на основе устройства.

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
      <!-- Left panel, top panel on mobile device --> 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9"> 
      <!-- Content --> 
      <div class="row"> 
       <div class="col-xs-1"> 
        <!-- First empty col (Also can use offset) --> 
       </div> 
       <div class="col-xs-1"> 

       </div> 
       <div class="col-xs-1"> 

       </div> 
        . 
        . 
        . 
       <div class="col-xs-1"> 
        <!-- Last empty col (Also can use offset) --> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Если и хотите использовать col-offset попробовать этот подход:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
      <!-- Left panel, top panel on mobile device --> 
     </div> 
     <div class="col-xs-8 col-lg-offset-2"> 
      <!-- Content --> 
      <div class="row"> 
       <div class="col-xs-1"> 

       </div> 
       <div class="col-xs-1"> 

       </div> 
        . 
        . 
        . 
      </div> 
     </div> 
    </div> 
</div> 

Offset перемещает столбцы справа, используя .col-xs(sm, md, lg)-offset-*. Эти классы увеличивают левое поле столбца на * столбцы. В этом примере .col-xs-offset-2 перемещает столбцы по двум столбцам.