изображение в виде столбцов занимает огромное вертикальное пространство - PullRequest
Новая
       10

изображение в виде столбцов занимает огромное вертикальное пространство

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

Я новичок в веб-разработке и пытаюсь заставить вещи работать с bulma css.
Я хочу показать 5 значков изображений, которые являются ссылками на мой опубликованный профиль c. Я хочу, чтобы эти значки располагались в одном ряду, предпочтительно для всего экрана, чтобы охватить весь экран (с начальным и конечным заполнением курса), а для экранов меньшего размера я бы хотел, чтобы они были в 2 или 3 рядах (и 3 или 2 значка в строка).

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

Токовый выход и его код выглядят примерно так:

ВЫХОД enter image description here

КОД 

<section class="hero is-light">
    <div class="hero-body">

        <h3 class="title is-h3">Important links.</h3>


        <div class="columns is-mobile is-multiline is-centered">
            <a href="link" class="column is-narrow">                 <img src="assets/img/home/email.png"     class="image is-1by1"  height="64" width="64" alt="gmail">     </a>            
            <a href="link" class="column is-narrow"> <img src="assets/img/home/linkedin.png"  class="image is-1by1"  height="64" width="64" alt="linkedin">  </a>
            <a href="link" class="column is-narrow">                         <img src="assets/img/home/github.png"    class="image is-1by1"  height="64" width="64" alt="github">    </a>   
            <a href="link" class="column is-narrow">         <img src="assets/img/home/medium.png"    class="image is-1by1"  height="64" width="64" alt="medium">    </a>
            <a href="link" class="column is-narrow">                        <img src="assets/img/home/twitter.png"   class="image is-1by1"  height="64" width="64" alt="gmail">     </a>   
        </div>  


        <div class="columns"><a href="" class="column"> </a></div><!-- empty column group for space -->

        <div class="columns is-mobile is-multiline is-centered">
           <a href="link" class="button is-primary"> Download My Resume . </a>   
        </div>

    </div>
  </section>
  1. Моя проблема заключается в пробеле между заголовком "Важные ссылки" и значками . почему между ними такое огромное вертикальное пространство? Как я могу уменьшить его?
  2. Я также хотел бы знать, есть ли возможность показывать эти значки как одинаково расположенные и охватывающие всю ширину для больших экранов; при выполнении текущего многострочного поведения для небольших экранов.
  3. Мне также было бы удобно, если бы все 3 вещи (название, изображения и кнопка загрузки) отображались в одной строке для большого экрана (например: заголовок в начале, значки в центре и кнопка в конце) и текущее решение для небольшого экрана. Я предполагаю, что это было бы возможно через nav, но я не уверен, что мы должны иметь нижний колонтитул, представленный nav и связанными с ним классами может быть, здесь также можно применить сетку?

Примечание: я бы предпочел решение bulma css без js / vanilla css, но дайте мне знать, если это невозможно.

1 Ответ

1 голос
/ 31 марта 2020

Элемент is-h3 имеет нижнее поле размером 24 пикселя, а элемент .columns также имеет поле, и они складываются. Вам нужно будет написать немного CSS, чтобы убрать это поле: 

.title { margin: 0; }
.columns {margin: 0; }

(вы, вероятно, должны дать им уникальные селекторы вместо изменения всех заголовков и столбцов)

...