как я могу заставить текст кнопки охватывать несколько строк на экранах небольшого размера, используя Bootstrap 4.0 - PullRequest
Новая
       172

как я могу заставить текст кнопки охватывать несколько строк на экранах небольшого размера, используя Bootstrap 4.0

0 голосов
/ 21 июня 2020

У меня есть следующий код внутри моего asp. net mvc основного веб-приложения + bootstrap 4.0, в котором отображается вопрос FAQ: - 

                     @foreach (var item2 in Model.OrderBy(a => a.Description))
                            {
                                <div class="card">
                                    <div class="card-header" id="@item2.Id+'headingTwoa'">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed" data-toggle="collapse"
                                                    data-target="#@item2.Id" aria-expanded="false"
                                                    aria-controls="collapseTwo">
                                                @Html.DisplayFor(modelItem => item2.Description)
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="@item2.Id" class="collapse" aria-labelledby="headingTwoa"
                                         data-parent="#accordion" style="">
                                        <div class="card-body">
                                            @Html.Raw(item2.Answer)
                                        </div>
                                    </div>
                                </div>
                            }

но проблема у меня Стоит отметить, что описание вопроса будет выводиться за пределы экрана на экранах небольшого размера, а текст ответа будет выровнен по размеру экрана ... поэтому не уверен, как я могу заставить текст кнопки занимать несколько строк на экранах небольшого размера?

Edit-1: -

Вот разметка для вопроса, который выводится вне макета страницы на экранах небольшого размера: - 

<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#1004" aria-expanded="false" aria-controls="collapseTwo">
What services are being provided?  What if my practice is already performing these services?
</button>

1 Ответ

1 голос

https://prnt.sc/t3ptin С официального сайта Bootstrap -> Я только что добавил текст на кнопку, и он автоматически занимает несколько строк. Пожалуйста, предоставьте скриншоты реальной веб-страницы, а HTML код не из вашего ASP. NET, но из вкладки "элементы" браузера. Я верю, что у вас просто большое слово. Если да, проверьте эту ссылку (интерактивно) https://developer.mozilla.org/ru/docs/Web/CSS/word-break

Изменить 1

Просто скопируйте свою кнопку в тот же компонент на веб-сайте начальной загрузки. (https://getbootstrap.com/docs/4.5/components/collapse/#accordion -пример ) - https://prnt.sc/t3t7k6 По-прежнему работает должным образом. Трудно дать вам четкий ответ ... Я предлагаю две вещи:

  1. попробуйте также добавить класс btn-block к вашим кнопкам
  2. предоставить скриншоты того, что вы есть сейчас, а также скриншоты вкладки вычисленных реквизитов https://prnt.sc/t3t9rr 1) выберите вашу кнопку 2) переключитесь на вычисляемую вкладку 3) поделитесь всеми реквизитами, которые браузер применяет к вашей кнопке, возможно, есть что-то особенное
...