Нет места между столбцами при использовании системы Flex Box Grid - PullRequest
Новая
       20

Нет места между столбцами при использовании системы Flex Box Grid

1 голос
/ 14 марта 2019

Использование системы Flex Box Grid .Как правильно удалить расстояние между двумя столбцами шириной 50%?

Существует ли стандартный класс для этого?Я не могу найти его на официальном сайте. 

<div class="container">
    <div class="row">
        <div class="col-md-6">
            col 1
        </div>
        <div class="col-md-6">
            col 2
        </div>
    </div>
</div>

Ответы [ 3 ]

2 голосов
/ 14 марта 2019

Я не использовал эту сеточную систему, но из проверки элементов в инструментах разработчика моего браузера я вижу, что пространство между элементами создается со свойствами padding-right и padding-left.Вы можете попробовать добавить другое имя класса к вашим вложенным элементам и написать правила для этого класса, которые переопределяют padding-right и padding-left.

CSS будет выглядеть примерно так.Ваш селектор должен иметь более высокую специфичность, чем селекторы, применяемые Flex Box Grid System.Если вам нужно узнать о специфике, вот хорошее руководство: https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

.container .row .noPadding {
    padding-right: 0;
    padding-left: 0;
}

HTML будет выглядеть так: 

<div class="container">
    <div class="row">
        <div class="noPadding col-md-6">
            col 1
        </div>
        <div class="noPadding col-md-6">
            col 2
        </div>
    </div>
</div>

В качестве альтернативы, вы можете отказаться от применения классовиз Flex Box Grid System на двух элементах, которые вы не хотите размещать, и просто используйте свойство flex спецификации css.Вот краткое руководство по css flex: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

1 голос
/ 15 марта 2019

Два варианта:

1) Если вам нужно глобально удалить интервал между строками и столбцами

Вы можете напрямую изменить :root переменные вflexboxgrid.css или переопределите их в своем пользовательском файле CSS. 

:root {
    --gutter-compensation: 0; // remove negative margins for row
    --half-gutter-width: 0; // remove padding from columns
}

2) Вы можете использовать служебный класс, если вам нужно удалить интервал только в определенном разделе

Заимствуя концепцию из Bootstrap , вы можете просто добавить класс, который удаляет отрицательное поле из .row и отступы из .col-*, 

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Затем добавьте .no-guttersкласс с .row. 

<div class="container">
    <div class="row no-gutters">
        <div class="col-md-6">
            col 1
        </div>
        <div class="col-md-6">
            col 2
        </div>
    </div>
</div>
1 голос
/ 14 марта 2019

Один из способов - использовать класс child-no-padding в row div: 

.child-no-padding>div {
  padding: 0 !important;
}

. Таким образом, вы предотвращаете повторение no-padding имени класса в дочерних элементах.

Образец: 

.child-no-padding>div {
  padding: 0 !important;
}

.col-2{
    background: #00fff5; border: 1px solid #6cccca; text-align:center; font-size:.8em; color:white;
}
<div class="container">
  <div class="row child-no-padding">
    <div class="col-2">
      col 1
    </div>
    <div class="col-2">
      col 2
    </div>
    <div class="col-2">
      col 3
    </div>
    <div class="col-2">
      col 4
    </div>
    <div class="col-2">
      col 5
    </div>
    <div class="col-2">
      col 6
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
...