Сложность использования грид-системы в адаптивном дизайне - PullRequest
Новая
       14

Сложность использования грид-системы в адаптивном дизайне

0 голосов
/ 23 мая 2018

Я работаю над адаптивной страницей, использующей gridview.У меня есть строка, которая содержит 3 столбца: 

 <div class="row">        
    <div class="col-12" >
      <div class="row">
        <div class="col-3">
            <img src="..." alt="">
          </div>              
          <div class="col-9">
            <h3>Headline 1</h3>
            <p>"Lorem ipsum dolor sit amet, ... </p>
          </div>
      </div>
    </div>

    <div class="col-12" >
      <div class="row">
        <div class="col-3">
            <img src="..." alt="">
          </div>              
          <div class="col-9">
            <h3>Headline 2</h3>
            <p>"Lorem ipsum dolor sit amet, ... </p>
          </div>
      </div>
    </div>   

      <div class="col-12" >
        <div class="row">
          <div class="col-3">
              <img src="..." alt="">
            </div>              
            <div class="col-9">
              <h3>Headline 3</h3>
              <p>"Lorem ipsum dolor sit amet, ... </p>
            </div>
        </div>
      </div>
  </div>

Каждый столбец содержит строку, которая сама состоит из двух столбцов: один для изображения, другой для заголовка и текста.Количество столбцов внутри каждой строки составляет до 12. Однако заголовок и содержимое отображаются под изображением, а не рядом с ним.Вы можете выяснить проблему?

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Я понял, что пропустил следующий CSS 

.row::after {
  content: "";
  clear: both;
  display: block;
  }

Вот почему row вел себя странно!

0 голосов
/ 23 мая 2018

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

Если бы это было так, не было бы достаточно места для отображения двух столбцов рядом друг с другом, и конечным результатом было бы то, что col-9 выпал бы вниз, под col-3.

Если это не поможет вам определить проблему, в качестве быстрого теста замените col-9 на col-6 и посмотрите, что произойдет.Если по-прежнему нет радости, отправьте ссылку на страницу, или запустите кодовое поле с HTML и CSS, который иллюстрирует проблему.

Удачи!

...