Bootstrap 4: Как создать гибкий контейнер шириной, такой как container-sm-10, с помощью SCSS - PullRequest
Новая
       72

Bootstrap 4: Как создать гибкий контейнер шириной, такой как container-sm-10, с помощью SCSS

0 голосов
/ 16 сентября 2018

В своей повседневной работе я использую несколько контейнеров начальной загрузки на одной странице.Мне нужна гибкая ширина контейнера для каждого.

Bootstrap решит эту проблему следующим образом: 

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-10">
      My content
    </div>
  </div>
</div>

Но это взрывает мою разметку и делает шаблоны в моей CMS немногоhard.

Я ищу сокращение, такое как container-md-10, с тем же результатом, что и выше: 

<div class="container-sm-12 container-md-10">
  My content
</div>

В случае значений начальной загрузки по умолчанию с12 столбцов сетки .container для md - это 

@media (min-width: 768px){
  .container{
    max-width:720px
  }
}

. Мой желаемый .container-md-10 будет 

@media (min-width: 720px){
  .container-md-10{
    max-width:600px
  }
}

Ссылка Bootstrap 4 для пользовательской разметки с резервным копированием с использованием SCSS равна

https://getbootstrap.com/docs/4.0/getting-started/theming/#responsive

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Это приводит, например, к 

@media (min-width: 768px){
  .text-md-left{
    text-align:left !important
  }
}

Согласно этому посту вы можете создать свой собственный контейнер, подобный этому

Как сослаться на $ container-max-widths в Bootstrap 

@mixin make-max-widths-container-width($max-widths: $container-max-
widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
        max-width: $container-max-width;
    }
  }
}
.container{
   @include make-max-widths-container-width();
}

Итак, как я могу работать с этими ссылками, чтобы построить свою собственную систему класса адаптивных контейнеров с SCSS, как описано выше?

Это определенно возможно, но выходит за рамки моих возможностей SCSS в Боотстрап 4.

1 Ответ

0 голосов
/ 18 декабря 2018

Я наконец нашел способ, как этого добиться: 

@for $i from 1 through ($grid-columns) {
  @each $breakpoint, $container-max in $container-max-widths {
    $container-max: ($container-max/1px)*$i/$grid-columns;
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        .container-#{$i} { max-width: #{$container-max}px; }      
    }
  }
  @each $breakpoint, $container-max in $container-max-widths {
    $container-max: ($container-max/1px)*$i/$grid-columns;
    @include media-breakpoint-only($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        .container#{$infix}-#{$i} { max-width: #{$container-max}px; }      
    }
  }
}
...