Question

我想实现什么

因此，我的超大型飞机和我的页脚之间有缝隙。我想消除这种差距。通过将margin-bottom设置为0px，我已经成功完成了操作；但是在那一刻，我不得不将ID传递给Jumbotron元素。现在，我想在不传递ID的情况下使用类来实现相同的效果。

我不想使用内联样式。我想要在一个单独的CSS文件中。

在旧的库中（ react-bootstrap not reactstrap ），我可以例如从某种类型中选择所有组件，就像我在下面提供的CSS中所做的那样。

因此错误可能是css文件中的选择器。我在网上找不到任何内容以单独的“ css文件”方式专门显示它。仅使用内联样式。

MainContent.js

import React from 'react';
import './MainContent.css';
import { Jumbotron, Button, Form, FormGroup, Label, Input, Container } from 'reactstrap';

const MainContent = () => {
    return (
        <Container>
            <Jumbotron>
                <Form>
                    <FormGroup>
                        <Label for="exampleEmail">Email</Label>
                        <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
                    </FormGroup>
                    <FormGroup>
                        <Label for="examplePassword">Password</Label>
                         <Input type="text" name="password" id="examplePassword" placeholder="password placeholder" />
                    </FormGroup>
                    <Button>Submit</Button>
                </Form>
            </Jumbotron>
        </Container>
    );
}

export default MainContent;

MainContent.css

.Container {
   margin-bottom: 0px;
}

.Jumbotron {
    margin-bottom: 0px;
}

Answer 1

如果您不想使用ID或内联样式进行操作，则有一种方法可以称为hack。

在 MainContent.js 中，向组件添加className属性，如下所示：

<Jumbotron className="jumbotron">

在 MainContent.css 中，在要覆盖其他样式的语句中添加!important：

.Container {
    margin-bottom: 0px;
}

.Jumbotron {
    margin-bottom: 0px !important;
}

除非您这样重写，否则将使用 node_modules / bootstrap / dist / css / bootstrap.css 中的margin-bottom: 2rem。

CSS文件中用于reactstrap组件的选择器

1 个答案: