时间戳

首页 > 解决方案 > 如何使图像适合 React/Bootstrap 中的页面？

javascript - 如何使图像适合 React/Bootstrap 中的页面？

问题描述

我正在使用将 props 数组中的每个项目映射到创建图像标签的函数。我正在尝试使用引导程序使每 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>
        )
    }
}

代码沙盒

标签： javascriptcssreactjsbootstrap-4

解决方案

我想，我发现了问题，

<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>
    ))}
</>

推荐阅读