Адаптивная кнопка Angular

#html #css #angular #twitter-bootstrap

#HTML #css #angular #twitter-bootstrap

Вопрос:

Я разрабатываю приложение с angular 8, и у меня есть форма с разными кнопками. Мне было интересно, есть ли какой-либо способ сделать кнопки отзывчивыми на телефонах, отображаемых в Chrome и Firefox. Вот что у меня есть сейчас :

Мой код :

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="row justify-content-around">
  <button (click)="register()" class="btn btn-outline-primary col-4"> Submiiiiiiiiit </button>
  <button type="submit" class="btn btn-primary col-4"> Validate </button>
</div>

Отображение первой кнопки отключено, но вторая кнопка в порядке, я думаю, текст — это то, что имеет значение.

Спасибо.

1. Вы пытались установить button{ width: fit-content} ?? какой css у вас есть на нем?

2. Я добавил правку в свой код

3. Ваш класс на 1-й кнопке не закрыт в конце, он отсутствует "

4. О да, спасибо, я добавил это, но это не решает мою проблему

5. Спасибо вам всем за вашу помощь, добавил я <meta name="viewport"> в голове, и теперь все работает нормально.

Ответ №1:

Используйте единицу vw измерения для шрифтов, которые соответствуют 1% от ширины области просмотра.

Вот пример кода:

 .btn {
    font-size: 5vw;
}

И функциональный пример здесь