реагирующее пятно в сетке boostrap при разрешении экрана менее 576 пикселей - PullRequest
Новая
       13

реагирующее пятно в сетке boostrap при разрешении экрана менее 576 пикселей

0 голосов
/ 01 апреля 2019

Я использую реагирующее пятно и сетку начальной загрузки. jquery не подключен - используются только scss-файлы начальной загрузки 4 (scss / bootstrap-grid.scss и scss / utilities / _sizing.scss). Слайды расположены внутри сетки контейнеров: 

<div className = "container">
  <div className = "row">
    <div className = "col-12">
      <Slider {... slickSettings}>
        <div className = "slider__slide">
          <div className = "row">
            <div className = "col-12">
              <div className = "row">
                <div className = "col-3">
                  left 1
                </ div>
                <div className = "col-9">
                  right 1
                </ div>
              </ div>
            </ div>
          </ div>
        </ div>
        <div className = "slider__slide">
          <div className = "row">
            <div className = "col-12">
              <div className = "row">
                <div className = "col-5">
                  left 2
                </ div>
                <div className = "col-7">
                  right 2
                </ div>
              </ div>
            </ div>
          </ div>
        </ div>
      </ Slider>
    </ div>
  </ div>
</ div>

Когда разрешение экрана составляет менее 576 пикселей, возникает проблема - ширина слайдов внутри слайдера становится огромной - 4473890 пикселей. Проблема решается заменой строки 

$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px);

на 

$container-max-widths: (xs: 320px, sm: 540px, md: 720px, lg: 960px, xl: 1140px);

в конфигурационном файле начальной загрузки scss. Это неправильное решение, поскольку контейнер с шириной экрана менее 576 пикселей имеет фиксированную ширину 320 пикселей.

1 Ответ

0 голосов
/ 02 апреля 2019

Решение проблемы: 

$container-max-widths: (xs: 100vw, sm: 540px, md: 720px, lg: 960px, xl: 1140px);
...