Bootstrap 4 мобильного flexbox слишком широко

Question

Так что моя проблема в том, что мой код:

<div class="row">
    <div class="w-100 col-auto col-lg-5 w-auto p-3 p-lg-5 m-4 rounded-sm bg-dark text-white shadow-lg">
         <h3>This is a very very very long Text</h3>
    </div>
</div>

приводит к следующему: Слишком длинный текст в мобильном телефоне

Столбец слишком широк для моего мобильного телефона ( или в данном случае Firefox), я думаю, это из-за полей и отступов.

Есть ли способ избежать этого?

Answer 1

Добавьте flex-shrink-1 и flex-grow-1. Это должно работать.

Answer 2

Лучше всего, не пытайтесь применять ваши пользовательские или какие-либо другие классы для гибкого макета или выделенные классы bootstrap.

не используйте margin в col bcz они имеют предопределенную ширину. width auto принимает ширину до ее содержимого.

 <div class="row">
   <div class="col-lg-5 p-lg-5">
    <div class="w-auto p-3 m-4 rounded-sm bg-dark text-white shadow-lg">
         <h3>This is a very very very long Text</h3>
    </div>
   </div>
  </div>