Question

我使用react-slick和bootstrap网格。 jQuery未连接-仅使用bootstrap 4 scss文件（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像素的固定宽度。

Answer 1

问题解决方案：

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

屏幕分辨率低于576px时，在boostrap-grid中进行反应平滑

1 个答案: