Добавьте поле или отступ в React- Bootstrap Form.Label - PullRequest
Новая
       5

Добавьте поле или отступ в React- Bootstrap Form.Label

0 голосов
/ 29 февраля 2020

Я пытаюсь оформить форму React- Bootstrap так, чтобы несколько списков флажков имели правильно выдающиеся заголовки. Я хочу, чтобы текст "Frontend", "backend", "database" et c имел отступ примерно 10-20 пикселей.

Как это выглядит сейчас:

How it looks now

Это не простой HTML / CSS, но я хотел бы просто добавить "padding: 10px" к заголовкам "Frontend Frameworks, Frontend, Backend, Databases".

Первым делом я попытался добавить таблицу стилей CSS, используя className="formLabel" со стилем для .formLabel: padding: 10px. Но это на самом деле не убирает sh других элементов, как с обычным CSS. Вместо этого я получаю это:

(Граница добавлена, чтобы было легче видеть, что происходит) It doesn't work!

Я также пытался добавить style={{ paddingBottom: "10px" }} в стиле этой темы . Я также прочитал страницу React Bootstrap Forms docs , но не нашел упоминания о том, как стилизовать элемент <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;
}

1 Ответ

1 голос
/ 29 февраля 2020

Попробуйте добавить «display» в «formLabel» в вашей таблице стилей. Это должно быть что-то вроде этого: 

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