向React-Bootstrap的Form.Label添加边距或填充

Question

我正在尝试设置React-Bootstrap表单的样式，以使一些复选框列表具有适当突出的标题。我希望文本“前端”，“后端”，“数据库”等具有大约10-20像素的填充。

现在看起来如何：

这不是简单的HTML / CSS，但是我想做的事情等同于在标题“前端框架，前端，后端，数据库”中简单添加“ padding：10px”。

[我尝试做的第一件事是使用className="formLabel"添加CSS样式表，.formLabel的样式为：padding: 10px。但这实际上并没有像普通CSS那样推挤其他元素。相反，我得到这个：

（添加了边框，以便更轻松地查看正在发生的事情）

我也尝试过以style={{ paddingBottom: "10px" }}的样式添加this thread。我也阅读了React Bootstrap Forms docs page，但没有提到如何设置<Form.Label>元素的样式。

因此，假设您想复制我在这些图像中所做的操作，请参见下面的代码：

// this code should nicely generate a "Homepage" component to use in React
import React, { Component } from "react";


import { Form } from "react-bootstrap";

import "./home.css";

class Homepage extends Component {
    state = {
        checked: [
            { vue: false, category: "framework" },
            { angular: false, category: "framework" },
            { react: false, category: "framework" },
            { html: false, category: "frontend" },
            { css: false, category: "frontend" },
            { javascript: false, category: "frontend" },
            { python: false, category: "backend" },
            { SQLite: false, category: "database" }
        ]
    };


    render() {
        return (
               // will generate the "framework" and "frontend" checkboxes
               <Form>
                    <Form.Label className="formLabel">
                        Frontend Frameworks
                    </Form.Label>
                    {this.state.checked.map((obj, index) => {
                        let box = null;
                        if (obj.category === "framework") {
                            box = (
                                <Form.Check
                                    inline
                                    label={Object.keys(obj)[0]} // returns values like "vue"
                                    type={"checkbox"}
                                    id={index}
                                />
                            );
                        }
                        return box;
                    })}
                </Form>
                <Form>
                    <Form.Label className="formLabel">Frontend</Form.Label>
                    {this.state.checked.map((obj, index) => {
                        let box = null;
                        if (obj.category === "frontend") {
                            box = (
                                <Form.Check
                                    inline
                                    label={Object.keys(obj)[0]} // returns values like "vue", "react"
                                    type={"checkbox"}
                                    id={index}
                                />
                            );
                        }
                        return box;
                    })}
                </Form>
        )
    }

export default Homepage;

// home.css

.formLabel {
    font-size: 18px;
    margin-bottom: 15px;
}

.testLabel {
    font-size: 18px;
    padding: 10px;
    border: 1px solid black;
}

Answer 1

尝试在样式表中将“显示”添加到“ formLabel”。应该是这样的：

.formLabel {
    font-size: 18px;
    margin-bottom: 15px;
    padding: 20px;
    display: inline-block;
}