Как отрегулировать зазор между колоннами в каркасе фундамента? - PullRequest
Новая
       4

Как отрегулировать зазор между колоннами в каркасе фундамента?

0 голосов
/ 30 января 2019

Я использую Foundation Framework и хочу сократить разрыв между столбцами.Какую часть в foundation.css мне следует изменить, чтобы уменьшить разрыв между этими 3 столбцами?

html-код: 

<div class="row">
    <div class="medium-10 columns" >
            <div class="row">
                    <div class="medium-4 columns">
                    </div>
                    <div class="medium-4 columns">
                    </div>
                    <div class="medium-4 columns">
                    </div>
            </div>
    </div>
    <div class="medium-2 columns" >
            <div class="row">
                    <div class="medium-6 columns">
                    </div>
                    <div class="medium-6 columns">
                    </div>
            </div>
    </div>

</div>

привет Даниэль, спасибо, но как насчет того, если я хочу настроить вконкретные столбцы?Например: в 1 строке 2 столбца, в 1 столбце 2 столбца, а в остальных столбцах 4 столбца.я только хочу отрегулировать разрыв в этом втором столбце, который имеет 4 столбца

1 Ответ

0 голосов
/ 30 января 2019

Вы должны изменить отступы столбцов следующим образом: 

@media print, screen and (min-width: 40em) {
  .column, .columns {
      padding-right: 10px;
      padding-left: 10px;
  }
}

Это перезаписывает следующие значения по умолчанию: 

    padding-right: .9375rem;
    padding-left: .9375rem;

См. https://codepen.io/DanielRuf/pen/RvoYrr

Is генерируется из mixin желоба в https://github.com/zurb/foundation-sites/blob/4abaf7ad3c508bf3fc73cb5dfd8928f756968c7d/scss/grid/_gutter.scss#L16

Я создал еще один пример с двумя классами pr10 и pl10 для добавления отступов к правым столбцам.

Вы можете сделатьТо же самое относится и к ряду строк.

https://codepen.io/DanielRuf/pen/QYGPKO

@media print, screen and (min-width: 40em) {
  .pl10 {
      padding-left: 10px;
      background: green;
  }
  .pr10 {
      padding-right: 10px;
      background: green;
  }
}

<div class="row">
    <div class="medium-10 columns" >
            <div class="row">
                    <div class="medium-4 columns">1
                    </div>
                    <div class="medium-4 columns">2
                    </div>
                    <div class="medium-4 columns">3
                    </div>
            </div>
    </div>
    <div class="medium-2 columns" >
            <div class="row">
                    <div class="medium-6 columns pl10 pr10">4
                    </div>
                    <div class="medium-6 columns pl10 pr10">5
                    </div>
            </div>
    </div>
</div>

(pr10 и pl10 - это сокращенная версия, которая часто используется в CSS-фреймворках с такими вспомогательными классами, как Tachyons иtailwindcss).

Или вы можете выбрать нужные столбцы с помощью следующего CSS: 

@media print, screen and (min-width: 40em) {
  .row > .medium-10.columns + .medium-2.columns > .row > .medium-6.columns {
      padding-left: 10px;
      padding-right: 10px;
      background: green;
  }
}

См. https://codepen.io/DanielRuf/pen/gqgbNG

...