Проблема в браузере / экране P C на 3 колонки (разделенная статья) с адаптивным дизайном (html) - PullRequest
0 голосов
/ 26 марта 2020
<div class="row articles">
<div class=" col-md-4 col-sm-6">
   <article>
       <p></p>
   </article>
   <article>
       <p></p>
   </article>
</div>
<div class=" col-md-4 col-sm-6">
   <article>
       <p></p>
   </article>
   <article>
       <p></p>
   </article>
</div>
</div>

Когда я изменяю размер на P C, это дает мне только 2 столбца вместо 3, я сделал "meta / viewport", а также "ясные" вещи, которые адаптивный дизайн хорошо работает на мобильных устройствах и планшетах но когда дело доходит до экрана P C, он будет делать странные вещи, что бы я ни пытался

1 Ответ

0 голосов
/ 26 марта 2020

Обратитесь к документации для Bootstrap 4 Я заметил, что вы пропускаете класс .col.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row articles">
<div class="col col-md-4 col-sm-6">
   <article>
       <p>Article 1</p>
   </article>
   <article>
       <p>Article 2</p>
   </article>
</div>
<div class="col col-md-4 col-sm-6">
   <article>
       <p>Article 3</p>
   </article>
   <article>
       <p>Article 4</p>
   </article>
</div>
<div class="col col-md-4 col-sm-6">
   <article>
       <p>Article 5</p>
   </article>
   <article>
       <p>Article 6</p>
   </article>
</div>
</div>
...