时间戳

首页 > 解决方案 > 如何避免 React-grid-system 中的列调整大小？

javascript - 如何避免 React-grid-system 中的列调整大小？

问题描述

您好，我有一个简单的 2 列页面，左侧是一列 md={1}，右侧是 md={11}( import {Container, Row, Col} from 'react-grid-system'; )是在左边的里面我有一个由我制作的带有侧边栏的 div。我只是希望左栏不调整大小但保持静止，当页面变小时，它只会上升到右栏。现在这已经发生了，但是在页面变得像智能手机或 ipad 一样小之前，左列开始调整大小，所以右列越过左列内的 div 并且即使只是一段时间也很可怕。我只希望左列始终保持位置，直到页面变得如此小以至于他必须像 react-grid-system 默认所做的那样向上移动。

   `<Row>
     <Col md={1} >
        <Sidebar/>
      </Col>
        
      <Col md={11}>
          <Routes/>
      </Col>
    </Row>`

侧边栏里面有一个 div，知道我如何处理它并不重要，因为我不希望那个 div 调整大小我希望侧边栏始终保持他的位置，直到它变小页面并且它上升，正如我所说的已经工作了。唯一的问题是，当页面调整大小时，div 为 md={1} 的列会调整大小，我只是希望它在到达小页面大小时调整大小。有什么方法可以设置这个东西吗？

fullpagesize_sidebar{md1} | fullpagesize_main md{11}

mdpagesize_sidebar{md1} | mdpagesize_main md{调整大小}

|smallpagesize_sidebar{md12}|
|smallpagesize_main{md12}|

现在他们做同样的事情，除了中间尺寸发生这种情况：
mdpagesize_sidebar{resize} | mdpagesize_main md{调整大小}

标签： javascripthtmlcssreactjscol

解决方案

推荐阅读