Question

我已经在React.js的网格内添加了文本。在Material UI的Grid组件中，我正在渲染不同的组件。有时我需要将视图分为两半，因此有条件的6half / 12full宽度。

将Paper（elevated div）组件（请参见下文）添加到Grid的左窗格或右窗格中时，页面的宽度变得很大，屏幕上有很多空白，因此可以向两侧滚动。即使应遵循指定的6/12一半大小的网格。文本内容正确显示在其网格内部，但是在网格项之间添加了大量空白。就像文本会泄漏出来并提供额外的宽度一样。

如果我为text / html组件设置了一个fixed，它将不会使那么大的空格变长。这仅在Safari中发生，并且仅在此text / html组件中发生，与其他jsx组件一样具有吸引力。在Chrome浏览器中，旁边的组件也添加了一些挤压垫，但并不是很大。可能会发生什么，以及如何在div内捕获html / text或任何其他建议？

父网格呈现的部分：

<div className={cssStyles.container}>
  <Grid container direction="column" >
    {
      leftPane && (
        <Grid item xs={rightPane ? 6 : 12}>
          <Grid container  wrap="nowrap">
            <Grid item>
              <VerticalMenu
              />
            </Grid>
            <Grid item xs>
              {renderLeftPane()}
            </Grid>
          </Grid>
        </Grid>
      )
    }
    {
      rightPane && (
        <Grid item  xs={leftPane ? 6 : 12}>
          <Grid container  wrap="nowrap">
            <Grid item xs>
              {renderRightPane()}
            </Grid>
            <Grid item>
              <VerticalMenu
              />
            </Grid>
          </Grid>
        </Grid>
      )
    }
  </Grid>

当在renderLeftPane（）或renderRightPane（）中使用时，Childs渲染的部分弄乱了页面

<Paper >
  <div className={someFixedWidhtHereHelpsSome}>
    <h1>Inledning</h1>
    <p>
      Osanno- likt nog överlevde han färden 572 meter upp
      i luften och kunde efter en hård fallskärmslandning
      konstatera att han hade över- bevisat
      alla pessimister som hade förutspått hans undergång.
      Det var emellertid inte bara en allmän våghalsighet
      och raketintresse som motiverade honom.
    </p>
    <p>
      Redan Eratosthenes (276–194 f.Kr.)
      kunde bevisa att jorden var rund och
      dessutom uppskatta dess storlek med förvånansvärd
      precision. Han gjorde det genom att
      jämföra skuggors..
    </p>
    <p>
      Redan Eratosthenes (276–194 f.Kr.)
      kunde bevisa att jorden var rund och
      dessutom uppskatta dess storlek med förvånansvärd
      precision. Han gjorde det genom att
      jämföra skuggors vinklar på olika avlägsna platser,
      ett experiment..
    </p>
  </div>

Answer 1

确定，将顶部网格容器从列更改为行：<Grid container direction="row">

文本在网格内部带有空白的HTML

1 个答案: