Проблема увеличения шрифтов в Bootstrap 4 - PullRequest
Новая
       4

Проблема увеличения шрифтов в Bootstrap 4

0 голосов
/ 06 января 2020

Мне нужно увеличить свои шрифты на панели фильтров приложения, в котором отображаются два флажка и заголовок с кнопкой рядом с ним. То есть у меня нет возможности добавить стиль на страницу, мне нужно сделать это только с bootstrap 4 классами. Раздел кода, в который я могу добавить классы, вставлен ниже. 

    <div className="container">
        <div className="row">
            <div className="col-sm-12 col-md-6 col-lg-3 p-3">
                <div className="checkbox-bigger">
                    <div className="form-check-inline">
                        <label className="form-check-label">
                            <input
                                    type="checkbox"
                                    className="form-check-input"
                                    checked="false"
                            />
                            Saturday
                        </label>
                    </div>
                </div>
            </div>

            <div className="col-sm-12 col-md-6 col-lg-3 p-3">
                <div className="checkbox-bigger">
                    <div>
                        <div className="form-check-inline">
                            <label className="form-check-label">
                                <input
                                        type="checkbox"
                                        className="form-check-input"
                                        checked="true"
                                />
                                Sunday
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div className="col-sm-12 col-md-6 col-lg-3 p-3">
                <input type="text" placeholder="Search" className="" value="xxx" />
            </div>

            <div className="col-sm-12 col-md-6 col-lg-3 p-3">
              <span className="font-italic">
                "20 of 30 shown" &nbsp;&nbsp;&nbsp;
              </span>
                <span>
                <input type="image" src="https://unsplash.it/15/15" alt="refresh" />
              </span>
            </div>
        </div>
    </div>

Я пытался добавить в "row" form-control-lg, но это не помогло. Я не очень хорошо разбираюсь с Bootstrap и не уверен, где вообще искать.

Я создал версию codeandbox, которая показывает мой код и код вокруг него, чтобы дать контекст тому, что должно означать большее.

https://codesandbox.io/s/quizzical-https-xr3eh

Спасибо за любую помощь или указатели

1 Ответ

0 голосов
/ 06 января 2020

Может быть, это поможет. Использование Bootstrap классов для увеличения размера шрифта может быть сделано различными способами.

Способ 1. Использование классов отображения 

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Примечание. Эти заголовки не реагируют.

Метод 2: Использование отведения 

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Метод 3: Использование адаптивных размеров шрифта. Это будет действительно интересно в вашем случае

https://github.com/twbs/rfs/tree/v8.0.4

Но, как всегда, используйте h1 - h6 для разных размеров.

Наконец, вы можете изменить размер Normalfont элемента root в вашей "таблице стилей приложения". Вы можете переопределить что-то, как показано ниже в вашей основной таблице стилей. 

h3 {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 35px;
}

Надеюсь, это поможет вам решить вашу проблему. Спасибо

...