Как заставить изображения соответствовать странице в React / Bootstrap?

Question

Я использую функцию, которая отображает каждый элемент в массиве реквизита для создания тега изображения.Я пытаюсь сделать так, чтобы каждые 3 изображения окружали их строкой div с помощью начальной загрузки, чтобы они правильно помещались на странице, но я не могу понять, как это сделать.Любая помощь будет оценена.Вот код:

import React, { Component } from 'react';
import "./Skills.css";

export default class Skills extends Component {
    static defaultProps = {
        images: [
            "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png",
            "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png",
            "https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png",
            "https://p7.hiclipart.com/preview/306/37/167/node-js-javascript-web-application-express-js-computer-software-others.jpg",
            "https://bs-uploads.toptal.io/blackfish-uploads/skill_page/content/logo_file/logo/5982/express_js-161052138fa79136c0474521906b55e2.png",
            "https://webassets.mongodb.com/_com_assets/cms/mongodb_logo1-76twgcu2dm.png",
            "https://www.pngfind.com/pngs/m/430-4309307_react-js-transparent-logo-hd-png-download.png",
            "https://botw-pd.s3.amazonaws.com/styles/logo-thumbnail/s3/012015/bootstrap.png?itok=GTbtFeUj",
            "https://sass-lang.com/assets/img/styleguide/color-1c4aab2b.png"
            ]
        }
        photo() {
            return (
                <div >
                    {this.props.images.map(image => (
                        <div className="col-md-4">
                            <img className="photo" src={image} />
                        </div>
                    ))}
                </div>
            );

        }


    render() {
        return (
            <div id="skills-background" className="mt-5">
                <div id="skills-heading" className="text-center">Skills I've Learned:</div>
                <div className="container">
                    <div className="row">
                            {this.photo()}
                    </div>
                </div>
            </div>
        )
    }
}

CodeSandbox

Answer 1

Я думаю, я нашел проблему,

<div>  <-----This div is the issue
    {this.props.images.map(image => (
        <div className="col-md-4">
            <img className="photo" src={image} />
        </div>
    ))}
</div>

Вы завернули col-md-4 в div, а div имеет стиль display: block, поэтому вы получаете каждое изображение наотдельный рядПросто замените div на Fragments,

<>  <-----Make it Fragment
    {this.props.images.map(image => (
        <div className="col-md-4">
            <img className="photo" src={image} />
        </div>
    ))}
</>