Блог

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я просматриваю веб-сайт на самой маленькой точке останова в react, между моими картами очень большое пространство. Я заметил это только на мобильных устройствах, так как при изменении размера моего браузера до наименьшего размера он никогда этого не делал, поэтому я не уверен, что это проблема только для мобильных устройств. Я использую классы начальной загрузки 4 для определения карточек и столбцов в компоненте.

Вот как выглядит мой сайт на экране обычного размера

Вот как выглядит мой веб-сайт в окне браузера самого маленького размера на моем ноутбуке

Вот gif-изображение того, как выглядит мой сайт на мобильном телефоне с большими пробелами

У меня есть компонент React, в котором есть группа карт, которая просматривает все карты, которые я хочу отобразить. Ниже приведен код для обоих файлов, которые я использую для сайта.

MediphorList.js

 import React from 'react'
import axios from 'axios'
import "./MediphorList.css"
import Mediphor from './Mediphor'

var url = process.env.REACT_APP_API_URL

class MediphorListextends React.Component {
    constructor(props) {
        super(props);
        this.getMediphors = this.getMediphors.bind(this)
    }

    state = {
        mediphors: [],
    }

    componentDidMount() {
        this.getMediphors()
    }

    async getMediphors() {
        const instance = axios.create({
            baseURL: url,
          });
          let response = await instance.get('/mediphors')
          this.setState({mediphors: response.data})
    }

    render() {
        if (this.state.mediphors) {
            return (
                <div className="container-fluid">
                    <div className="row display-flex no-gutters">
                        <div className="card-group">
                        {this.state.mediphors.map((mediphor, i) => (
                            <Mediphor mediphor={mediphor} key={i}/>
                        ))}
                        </div>
                    </div>
                 </div>
            )
        } else {
            return (<div>No Mediphors</div>)
        }
    }
}

export default MediphorList
 

У меня есть еще один файл, который используется для рендеринга самой карты. Ниже приведен код для этого файла.

Mediphors.js

 import React from 'react'
import './Mediphor.css';

var url = process.env.REACT_APP_API_URL


class Mediphor extends React.Component {
    constructor(props) {
        super(props);
        this.getMediphor = this.getMediphor.bind(this)
        //console.log(props)
    }

    state = {
        description: this.props.mediphor.description,
        hashtags: this.props.mediphor.hashtags,
        imageURL: this.props.mediphor.imageURL
    }

    async getMediphor() {
        let data = {
            imageURL: this.props.mediphor.imageURL
          }
          return fetch(url   '/mediphors/mediphor', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
          }).then(data => data.json())
          .then(response => {this.setState({description: response[0].description, hashtags: response[0].hashtags, imageURL: response[0].imageURL,}); console.log(this.state)})
          .catch(err => console.error('Error: ', err))
    }

    render() {
        return (
            <div className="col-12 col-md-6 col-lg-4 col-xl-3 col-xxl-2 mt-2 mb-2 p-2">
                    <div className="card bg-light">
                        <img src={this.props.mediphor.imageURL} className="card-img-top" alt="..."/>
                        <div className="card-body">
                            <div className="row no-gutters">
                                <div className="card-subtitle text-muted small">
                                    {this.state.hashtags.map((hashtag, i) => (
                                        <div className="d-inline">{hashtag} </div>
                                    ))}
                                </div>
                            <p>{this.state.description}</p>
                        </div>
                    </div>
                </div>
            </div>
    )}
}

export default Mediphor