Модальности перепутались и теперь переполняются

#html #bootstrap-4

#HTML #bootstrap-4

Вопрос:

Модальности в проекте, похоже, по какой-то причине сломались. Это работало несколько дней назад, теперь, похоже, оно сломалось. Контейнер div переполнен.

 This is a sample html I've been using after all the modals broke
  
 <!-- Modal -->
<div id="regHomeModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
        <button type="button" class="close" data-dismiss="modal">amp;times;</button>
      </div>
      <div class="modal-body">

        <div class="container" style="border-style: dotted; border-color: black;">
          <div class="row" style="border-style: dotted; border-color: red;">
            <div class="col-sm-9">
              <btn class="test btn btn-info btn-block btn-lg">TEST BUTTON</btn>
            </div>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
  

Ответ №1:

Это происходит потому, что в bootstrap уже есть встроенный класс ‘.container’, ширина которого предопределена, попробуйте изменить имя класса и проверьте.

Комментарии:

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