屏幕分辨率小于 576px 的引导网格中的 react-slick

Posted 2023-02-25

【中文标题】屏幕分辨率小于 576px 的引导网格中的 react-slick

【英文标题】：react-slick within boostrap-grid at screen resolution less 576px

【发布时间】：2019-04-01 13:22:05

【问题描述】：

我使用 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 像素的固定宽度。

【参考方案1】：

问题解决方案：

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