您的位置: 首页  >  技术问答  >  如何在ReactJs材质UI网格中具有不同的水平和垂直间距

如何在ReactJs材质UI网格中具有不同的水平和垂直间距

分类: 技术问答 • 2022-06-02 12:51:02
问题描述：

在材质UI网格"中，为了垂直间隔Grid Item，我在Grid Container中提供了间距.在大屏幕上看起来不错，但在移动设备上，网格项目之间的水平间距却很尴尬.

In Material UI Grid, to space Grid Item vertically, I provided spacing in Grid Container. It looks good on big screens but on mobile, it results in awkward horizontal spacing between Grid Items.

 <Grid container spacing={24}>
   <Grid item xl={6} md={6} sm={12} xs={12}>
     <TextField
      required
      id="outlined-email-input"
      label="Customer Name"
      name="email"
      fullWidth
     />
    </Grid>
    <Grid item xl={6} md={6} sm={12} xs={12}>
      <TextField
       required
       id="outlined-email-input"
       label="Customer Name"
       name="email"
       fullWidth
      />
     </Grid>
  </Grid>

如何在Grid中设置不同的垂直和水平间距?

How can I have different vertical and horizontal spacing in Grid?

答

您必须了解网格在内部如何工作.材质UI网格布局基于flexbox模型.因此，在Grid上设置容器属性，在其上设置"display flex".现在，该弹性盒中的项目可以水平或垂直流动，因此可以指定水平间距或竖直间距，但不能同时提供两者.

You must understand how grid works internally. Material UI Grid layout is based on the flexbox model. So, setting container attribute on Grid, sets "display flex" on it. Now items in this flex box can either flow horizontally or vertically, thus either horizontal spacing can be given or vertical spacing can be given but not both.

如果在网格上将方向"属性设置为列"，则如下所示:

If you set "direction" attribute to "column" on Grid as shown:

<Grid container direction={'column'} spacing={24}>
        <Grid item xl={6} md={6} sm={12} xs={12}>
          <TextField
            required
            id="outlined-email-input"
            label="Customer Name"
            name="email"
            fullWidth
          />
        </Grid>
        <Grid item xl={6} md={6} sm={12} xs={12}>
          <TextField
            required
            id="outlined-email-input"
            label="Customer Name"
            name="email"
            fullWidth
          />
        </Grid>
 </Grid>

然后提供的间距将用作项目之间的垂直间距，并且将垂直排列项目.

Then spacing provided will act as vertical spacing between the items and items will be arranged vertically.

现在，如果要求物品水平放置，则上面的代码将被更改，如下所示:

Now If items are required to arrange horizontally then above code will be changed as shown:

<Grid container direction={'row'} spacing={24}>
        <Grid item xl={6} md={6} sm={12} xs={12}>
          <TextField
            required
            id="outlined-email-input"
            label="Customer Name"
            name="email"
            fullWidth
          />
        </Grid>
        <Grid item xl={6} md={6} sm={12} xs={12}>
          <TextField
            required
            id="outlined-email-input"
            label="Customer Name"
            name="email"
            fullWidth
          />
        </Grid>
      </Grid>

在此，间距将充当水平间距.另外，如果您未指定"direction"属性，则这是默认实现.

Here, in this implementation spacing will act as horizontal spacing. Also, this is the default implementation if in case you not specify "direction" attribute.

现在可以在移动设备和台式机的两种布局之间进行切换，我们可以按照以下步骤进行操作:

Now to switch between 2 layouts in mobile and desktop, we can do it as:

使用媒体查询实现CSS类，该查询将移动类型设备的显示"设置为无"，将桌面类型设备的显示"设置为初始".让我们将其命名为"display-lg".并以类似的方式，使类"display-sm"在手机上显示元素并将其隐藏在桌面上.在要在桌面上显示的网格布局上应用"display-lg"，在要在移动设备上显示的网格布局上应用"display-sm". 这种方法似乎耗时又冗长，但可以为您提供*，以便将来在布局中添加更多针对移动设备的更改.

Implement a css class using media query that set "display" to "none" for mobile type device and "initial" for desktop type device. Let's name it "display-lg". And in similar way, make class "display-sm" that show element on mobile and hide it on desktop. Apply "display-lg" on grid layout that is to be shown on desktop and "display-sm" on grid layout that is to be shown on mobile. This approach may seems you long and redundant but it provides you liberty to add more mobile specific changes in your layout in future.

如果您需要更清晰的答案，请随时发表评论.

Please feel free to comment if you need more clarity on answer.

相关推荐