我一直在学习React.js，但我在react、styled components和Bootstrap之间的一些样式上遇到了麻烦。理想的目标是一行有3个gif，所有的都有一个居中的按钮，它们之间没有间距。我希望每个gif都有100vh。
以下内容应包含需要了解的所有内容。
React文件：

import React from 'react';
import {Bootstrap, Grid, Row, Col} from 'react-bootstrap';
import styled from 'styled-components';

const Gif = styled.img`
height: 100vh;
width: 100%;
`;

const Mp4 = styled.video`
    height: '100vh',
    width: '100%'
`;

const workButton = {
    left: '33%',
    top: '40%'
}

const schoolButton = {
    left: '33%',
    top: '40%'
}

const aboutButton = {
    left: '22%',
    top: '40%'
}

const Button = styled.button`
    border-radius: 3px;
    background: transparent;
    color: palevioletred;
    border: 2px solid palevioletred;
    position: absolute;
    font-size: 50px;
`;

class WorkThumbnail extends React.Component {
    constructor(props) {
        super(props);
        this.state = { }
    }

    showBodyClick(value)  {
        this.props.getClick(value); 
    }

    render() {
        return (
            <div>
                <Mp4 src="./app/Components/images/work.mp4" loop autoPlay></Mp4>
                <Button style={workButton} onClick={this.showBodyClick.bind(this, 3)}>Work</Button>
            </div>
        );
    }  
}

class SchoolThumbnail extends React.Component {
    constructor(props) {
        super(props);
        this.state = { }
    }

showBodyClick(value) {
    this.props.getClick(value);
}

render() {
    return (
        <div>
            <Gif src={'./app/Components/images/tracer-ult.gif'}/>
            <Button style={schoolButton} onClick={this.showBodyClick.bind(this, 2)}>School</Button>
        </div>
        );
    }  
}

class AboutThumbnail extends React.Component {
    constructor(props) {
    super(props);
    this.state = { }
    }

showBodyClick(value) {
    this.props.getClick(value);
}

render() {
    return (
        <div>
            <Gif src={'./app/Components/images/tracer-ult.gif'}/>
            <Button style={aboutButton} onClick={this.showBodyClick.bind(this, 1)}>About Me</Button>
        </div>
        );
    }  
}

export { WorkThumbnail, AboutThumbnail, SchoolThumbnail };

webpack.config:

var path = require("path");

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
                            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {
              test: /\.html$/,
              loader: 'html-loader?attrs[]=video:src'
            }, {
              test: /\.mp4$/,
              loader: 'url?limit=10000&mimetype=video/mp4'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },

            {

                test: /\.js?/,
                exclude: /node_modules/,
                //include: SRC_DIR,
                loaders: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.css$/, // Only .css files
                loader: 'style!css' // Run both loaders
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                  'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                  'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
              } 

        ]
    }
};

module.exports = config;

索引文件调用"React"文件，该文件实际上名为thumbnail.js
index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {Bootstrap, Grid, Row, Col, Button} from 'react-bootstrap';
import {WorkThumbnail, AboutThumbnail, SchoolThumbnail} from './Components/Thumbnail';
import { Body } from './Components/Body';
import styled from 'styled-components';

const noPadding = {
    paddingLeft: '0px',
    paddingRight: '0px',
    marginLeft: '0px',
    marginRight: '0px',
    textAlign: 'center'
}

export class Layout extends React.Component {
    constructor(){
        super();
        this.state = {
            show: 3
        }
    }

    getClick(value){
        this.setState({
            show: value
        });
    }

    render() {
        return (
            <div>

                    <div className="col-lg-4 col-md-4 col-sm-4 text-center" style ={noPadding}>
                        <WorkThumbnail getClick={this.getClick.bind(this)} show = {this.state.show} />
                    </div>

                    <div className="col-lg-4 col-md-4 col-sm-4" style ={noPadding}>
                        <AboutThumbnail getClick={this.getClick.bind(this)} show = {this.state.show} />
                    </div>  

                    <div className="col-lg-4 col-md-4 col-sm-4" style ={noPadding}>
                        <SchoolThumbnail getClick={this.getClick.bind(this)} show = {this.state.show} />
                    </div>

                <div>
                    <hr />
                    <Body show = {this.state.show}/>
                </div>
            </div>
        );
    }  
}


ReactDOM.render(
  <Layout />,
  document.getElementById('app')
);

我知道这对有经验的开发人员来说可能看起来很糟糕。我对Web开发还很陌生，所以也欢迎任何指针