Удалить желоб из сетки Bootstrap 4

Question

В Bootstrap 4 меня попросили настроить сеточную систему по умолчанию для рабочего стола следующим образом:

, где точка останова контейнера и рабочего стола1280px.

Пример, который я пробовал:

   

 body {
  margin-top: 3rem;
}

.l-wrap {
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
}

.grid-item {
  width: calc((100% - 50px * 11) / 12);
  margin-top: 24px;
  margin-right: 50px;
  float: left;
}

/* For a 3-column grid */
.grid-item:nth-child(1n+12) {
  margin-right: 0;
  float: right;
}

/* Demo purposes */
.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  text-align: center;
  background: rgba(255, 0, 0, 0.25);
}

<div class="l-wrap">
  <div class="col-grid">
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
    <div class="grid-item">Grid item</div>
  </div>
</div>

Это прекрасно работает.Но я пытаюсь добиться того же в Bootstrap.

gutter width is 50px, но он лежит в пределах container.

Это должно дать мне column width = 61px, поскольку мой желоб идетбыть 50*11 = 550.Таким образом, 1280-550 / 12 = 60,83.

По умолчанию начальная загрузка оставляет желоб с любой стороны.

Решения, которые я пробовал

1. Я пробовал заполнение влево и вправо от 1-го и последнего столбца соответственно, оставляя столбец сетки дляразной ширины ( Задача )

2. Пробовал использовать SCSS mixin для генерации столбца

@include media-breakpoint-up('lg', $breakpoints) {
   @for $i from 1 through $columns {
      .col#{$infix}-#{$i} {
         padding-right: 0;
         padding-left: 0;
         @include make-col($i, $columns);
      }
   }
}

Так чтоЯ могу удалить отступы с любой стороны, а затем использовать собственный CSS поверх этого, чтобы добиться такого поведения, но без success

Благодарю, если кто-нибудь сможет подсказать, как этого добиться в Bootstrapпожалуйста?

Answer 1

Узкие эффекты для контейнера и желоба от Susy могут быть легко достигнуты в Bootstrap, используя три ключевых изменения:

1. Пропустить, используя container или container-fluid класс, какуказано в документации .

   Редактировать: Если вам нужно ограничить контейнер до 1280px, проверьте редактирование ниже.

2. Установите заполнение столбцов по умолчанию на 25pxна каждой стороне (итого 50px) вместо начальных 30px

3. Отрегулируйте отрицательное поле в строке, чтобы отразить изменение желоба, изменив значение по умолчанию на -25px для каждого поля.side

Таким образом, ваш CSS будет:

.row {
  margin-left: -25px;
  margin-right: -25px;
}

.col,
[class*="col-"] {
  padding-right: 25px;
  padding-left: 25px;
}

Одним из преимуществ этого подхода является его отзывчивость - он не привязан к экрану любого размера, например 1280px.Это можно увидеть в действии в этом фрагменте jsfiddle или ниже.Мы добавили некоторые выходные данные ширины для отладки и тестирования в первом, для краткости опущены во фрагменте ниже.

Редактировать: Если вам нужно ограничить размер контейнера 1280px, вы можете сделать:

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
        padding-left: 0;
        padding-right: 0;
    }
}

Вышеуказанное гарантирует, что контейнер будет иметь максимальные 1280px, когда экран имеет ширину 1280px или более, или придерживаться отклика Bootstrap по умолчанию, когда он меньше.Если вы предпочитаете, чтобы оно всегда было 1280px, удалите точку прерывания носителя и установите для width и max-width значение 1280px.

#example-row {
  background: #0074D9;
  margin-top: 20px;
}

.example-content {
  display: flex;
  height: 80px;
  background-color: #FFDC00;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.row {
  margin-left: -25px;
  margin-right: -25px;
}

.col,
[class*="col-"] {
  padding-right: 25px;
  padding-left: 25px;
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
    padding-left: 0;
    padding-right: 0;
  }
}

<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">

<div class="container" id="example-container">
  <div class="row" id="example-row">
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
    <div class="col-1">
      <div class="example-content">Grid Item</div>
    </div>
  </div>
</div>

Все это также может быть выполнено в исходном коде с помощью SASS - проверьте документацию Bootstrap на наличие миксов.

Наконец, если вам нужно, чтобы эти изменения в размерах по умолчанию использовались только для какого-то специального контента, измените приведенные выше классы на новое имя (например, .container-1280) и внесите соответствующие изменения в HTML.