Применение сетки начальной загрузки на экране планшета

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

Изображение на среднем и большом экране. Изображение на экране планшета. Он должен стек на экране смартфона.

<div class="row">
    <nav class="col-md-8 col-sm-12" id="left">
        <a href="#"><img src="" alt=""></a>
    </nav>
    <nav class="col-md-4 col-sm-12">
    <div class="row">
        <nav class="col-md-2 col-sm-6" id="side1">
            <a href="#"><img src="" alt=""></a>
        </nav>  
        <nav class="col-md-2 col-sm-6" id="side2">
            <a href="#"><img src="" alt=""></a>
        </nav>    
    </div>
    </nav> 
  </div>

twitter-bootstrap
person gutemberg33    schedule 29.06.2017    source источник
comment
что такое id=left,side1 и side2... какой css для этого?   -  person Dixit    schedule 29.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте следующее:

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-8 col-sm-12" id="left" style="background-color:red; height:100px;">          
    </nav>
    <nav class="col-md-4 col-sm-12">
      <div class="row">
        <nav class="col-md-6 col-sm-6" id="side1" style="background-color:pink; height:100px;">
        </nav>  
        <nav class="col-md-6 col-sm-6" id="side2" style="background-color:tan; height:100px;">          
        </nav>    
      </div>
    </nav> 
  </div>    
</div>

Убедитесь, что вы используете col-md-6 вместо col-md-2 во второй строке.

person Paul Lernmark    schedule 29.06.2017
comment
или просто используйте .col-sm-6 и полностью избавьтесь от .col-md-6. - person slynagh; 29.06.2017
comment
Я разместил код здесь: jsbin.com/yirixuc/edit?html,output Что точно не работает? - person Paul Lernmark; 30.06.2017