Question

我正在通过以下代码进行操作：

demo.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
  paper2: {
    height: "100%",
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

export default function FullWidthGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
          <Paper className={classes.paper}>xs=12 sm=6</Paper>
        </Grid>
        <Grid item xs={12} sm={6} >
          <Paper className={classes.paper2}>xs=12 sm=6</Paper>
        </Grid>        
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=6</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
        <Grid item xs={6} sm={3}>
          <Paper className={classes.paper}>xs=6 sm=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';

ReactDOM.render(<Demo />, document.querySelector('#root'));

但是我得到以下格式的框布局：

（1）有没有办法使正确的网格不与底行上的框重叠？

（2）我需要右边的框的高度与左边的栅格的总数相同，并且栅格的数量是动态的。

Answer 1

.makeStyles-paper2-3 {与16px一起使用height:100%填充，这会导致右边的div溢出。删除padding，它不会溢出。

但是，如果您想为内部内容提供填充，则可以使用子div

尝试一下：

<Grid item xs={12} sm={6} >
    <Paper className={classes.paper2} style={{padding: '0'}} > {/*Removed padding from here*/}
        <div style={{padding: '16px'}}>xs=12 sm=6</div> {/* Added padding  here */}
    </Paper>
</Grid>

希望有帮助。干杯！

Answer 2

将const f = (deep, something) => { ..... var n = parseInt(deep); f1(deep, something); return f(deep +1, something); }添加到//The initial load bindings function load_bindings(){ var trigger = $('.navbuttons a'); var container = $('.contentcontainer'); trigger.on('click', function() { var $this = $(this); var target = $this.data('target'); container.load(target); //to add bindings inside the elements on container reload_bindings(); console.log("success"); return false; }); } //The function to add new bindings elements function reload_bindings(){ var container = $('.contentcontainer'); var trigger = $('.navbuttons a',container); //only add to the 'a' elements inside the container trigger.on('click', function() { var $this = $(this); var target = $this.data('target'); container.load(target); reload_bindings(); console.log("success"); return false; }); } $(document).ready(function() { load_bindings(); }：

box-sizing: border-box

演示：

将右侧网格尺寸与左侧动态网格的总高度对齐

2 个答案: