Javascript 尝试创建响应性布局，但右侧div不断推到左侧div的顶部

我有一个包含两列的react组件。在左边我有一个日历，在右边我有一个部分，有一些文本和一个输入和选择字段

每当我开始最小化窗口时，右边的元素只会向左推，直到它们位于日历的顶部

我正在尝试设置它，这样窗口越小，内容就会保持在原来的位置，并优雅地失败，而不是互相重叠

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“antd”导入{Col，Row}；
从“样式化组件”导入样式化；
导入“antd/dist/antd.css”；
从“/Calendar”导入日历；
类应用程序扩展了React.Component{
render（）{
返回(
选定日期：
可用时间：
是
颗粒物
任何
);
}
}
const TimeSelection=styled.div`
利润率最高：10%；
`;
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

从您的CodeSandbox示例来看，主要问题似乎是日历占用了固定的宽度。列宽如人们所期望的那样工作，但日历没有调整，使其看起来像是内容重叠

我不确定您要在这里使用什么样的布局，但从中可以看出，您应该能够在不同的屏幕大小下提供不同的列跨距。所以你可以这样做：

<Row>
  <Col xs={24} md={12}>
    <Calendar className="myClassname" />
  </Col>
  <Col xs={24} md={12}>
    Selected Date: <input />
    <TimeSelection>
      ...
    </TimeSelection>
  </Col>
</Row>

选定日期：
...

---

以最小的尺寸（

xs

）为每列指定24个跨度将使它们占据整个宽度，从而导致它们堆叠。然后在

md

大小上，它们都设置为12的跨度，就像您现在所做的那样

从您的代码沙盒示例来看，主要问题似乎是日历占用了固定的宽度。列宽如人们所期望的那样工作，但日历没有调整，使其看起来像是内容重叠

我不确定您要在这里使用什么样的布局，但从中可以看出，您应该能够在不同的屏幕大小下提供不同的列跨距。所以你可以这样做：

<Row>
  <Col xs={24} md={12}>
    <Calendar className="myClassname" />
  </Col>
  <Col xs={24} md={12}>
    Selected Date: <input />
    <TimeSelection>
      ...
    </TimeSelection>
  </Col>
</Row>

选定日期：
...

---

以最小的尺寸（

xs

）为每列指定24个跨度将使它们占据整个宽度，从而导致它们堆叠。然后在

md

大小上，它们都设置为12的跨度，就像您现在所做的那样

这是一种响应性问题，日历大小是静态应用的。 使用下面的css修复该问题。（将css添加到底部的Calander.css文件中）

---

这是一种响应性问题，日历大小是静态应用的。 使用下面的css修复该问题。（将css添加到底部的Calander.css文件中）

/* make calendar fit to column */ 
.react-datepicker,
.react-datepicker__month-container {
  width: 100%;
}
/* change calendar column width dynamically */ 
.myClassname,
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  width: 12%;
}