Bootstrap 4 модальная ширина (увеличение)

Question

Bootstrap 4 модальная ширина (увеличение)

Я хочу, чтобы модал был 80% или около того ширины экрана. modal-lg недостаточно велик. Это:

.modal .modal-dialog {

  width: 80%;

}

Не работает с Bootstrap 4.

574 9

bootstrap-4 twitter-bootstrap-4 bootstrap-modal

9 ответов:

Comments

Ничего не найдено.

claudios · Accepted Answer · 2017-09-14 05:44:28

Вы можете создать или просто переопределить bootstrap по умолчанию modal-lg, выполнив следующие действия:
.modal-lg {
    max-width: 80%;
}
Если не работает, просто добавьте !important, чтобы это выглядело как ниже
.modal-lg {
    max-width: 80% !important;
}
Теперь вызовите modal-lg.
<div class="modal-dialog modal-lg" role="document">
 
</div

Joel Enanod Jr · Accepted Answer · 2017-10-25 10:36:45

Для отзывчивого ответа.
@media (min-width: 992px) {
  .modal-dialog {
    max-width: 80%;
  }
}

kitsu.eb · Accepted Answer · 2018-07-05 18:16:03

Bootstrap 4 включает в себяутилиты калибровки . Вы можете изменить размер на 25/50/75/100% ширины страницы (я бы хотел, чтобы было еще больше приращений).

Чтобы использовать их, мы заменим класс modal-lg. Как ширина по умолчанию, так и modal-lg используют css max-width для управления шириной модала, поэтому сначала добавьте класс mw-100, Чтобы эффективно отключить max-width. Затем просто добавьте нужный класс ширины, например w-75.

Unknown_Coder · Accepted Answer · 2017-03-20 08:19:05

Просто Используйте !важно после предоставления ширины этого класса, который переопределяет ваш класс.

Например
.modal .modal-dialog {
  width: 850px !important;
}
Надеюсь, это сработает для вас.

CeezS · Accepted Answer · 2018-05-28 09:40:26

В Bootstrap 4 Вы должны использовать атрибут 'max-width', и тогда он отлично работает.
<div id="modal_dialog" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog" style="max-width: 1350px!important;" role="document">
    <div class="modal-content">
        <div class="modal-body">
            Sample text
        </div>
    </div>
</div>

Nemus · Accepted Answer · 2018-06-14 20:54:39

Это было решение, которое сработало для меня:

.modal{
 padding: 0 !important;
}
.modal-dialog {
  max-width: 80% !important;
  height: 100%;
  padding: 0;
  margin: 0;
}

.modal-content {
  border-radius: 0 !important;
  height: 100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" class="menu-toggler" data-toggle="modal" data-target=".bd-example-modal-lg">Menu</a>

<div class="modal mobile-nav-modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <a href="#" class="" data-dismiss="modal">Close Menu</a>

      <nav class="modal-nav">
        <ul>
          <li><a data-toggle="collapse" href="#collapseExample" role="button">Shop</a>
            <div class="collapse" id="collapseExample">
              <ul>
                <li><a href="#">List 1</a></li>
                <li><a href="#">List 2</a></li>
                <li><a href="#">List 3</a></li>
              </ul>
              <ul>
                <li><a href="#">List 1</a></li>
                <li><a href="#">List 2</a></li>
                <li><a href="#">List 3</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">Made To Order</a></li>
          <li><a href="#">Heritage</a></li>
          <li><a href="#">Style & Fit</a></li>
          <li><a href="#">Sign In</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Elie Nassif · Accepted Answer · 2017-03-20 08:08:00

Убедитесь, что ваш модал не помещен в контейнер, попробуйте добавить !важное примечание, если оно не изменяет ширину от исходной.

mjishigh · Accepted Answer · 2017-03-20 08:11:31

Попробуйте использовать px
.modal .modal-dialog {
  width: 850px;
}
Просто измените размер.

s.a.filko · Accepted Answer · 2017-07-07 21:02:56

Если вы используете Sass,

В соответствии с документацией Вы можете настроить значения по умолчанию.

В вашем случае вы можете легко переопределить переменную с именем $modal-lg в вашем файле _custom.scss.