bootstrap-4 - 屏幕分辨率小于 576px 的 boostrap-grid 中的 react-slick

Question

我使用 react-slick 和引导网格。jquery 未连接 - 仅使用 bootstrap 4 scss 文件（scss / bootstrap-grid.scss 和 scss / utility / _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 像素的固定宽度。

Answer 1

问题方案：

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