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

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

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

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

Но это усложняет мою разметку и затрудняет работу с шаблонами в моей CMS.

Я ищу сокращение, такое как 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 в бутстрапе

@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 в Bootstrap 4.


twitter-bootstrap sass bootstrap-4 css-selectors scss-mixins
person demonde    schedule 16.09.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

@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; }      
    }
  }
}
person demonde    schedule 18.12.2018

arrow_upward
1
arrow_downward

Я обнаружил, что это может работать, Bootstrap v.5

Опция 1

@mixin default-max-widths($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;
    }  
  }
}

.my-container {
  @include make-container();
  @include default-max-widths();

}

Вариант 2

.my-container {
  @include make-container();
  @extend .container;
 }
person Arlan T    schedule 29.09.2020