Модифицированный диалог Bootstrap. Можно ли использовать систему сетки в рамках модального контекста?

Ответ 1

Я начал работать нормально... http://www.bootply.com/WAwE3QyUdb

Добавьте col в контейнер внутри модального тела.

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Modal header</h3>
        </div>

        <div class="modal-body">
            <div class="container col-md-12">
                <div class="row">
                    <div class="col-md-3">
                        1st col 3
                    </div>

                     <div class="col-md-3">
                         2nd col 3
                     </div>

                     <div class="col-md-3">
                         3rd col 3</div>
                     </div>
                 </div>
             </div>
         </div>
    </div>
</div>

Ответ 2

Просто добавьте класс строки в ваш модальный код в соответствии с приведенным ниже кодом, а затем вы можете разделить свой модальный, как вы пожелаете:

<div class="modal-body row">
  <div class="col-md-8">
    <p>Column One content here ... </p>
  </div>
  <div class="col-md-4">
    <p>Column Two content here ... </p>
  </div>
</div>

Ответ 3

Ответ Тома Руджа вдохновил меня. Вам не нужно, чтобы контейнер также представлял собой столбец полной ширины, который, как указал Мэтт Делл, потерпит неудачу.

Сделайте контейнер-жидкость вместо этого!

Загрузочный стенд с col-md-12 и контейнером с жидкостью рядом

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Modal with container fluid</h3>
        </div>
        <div class="modal-body">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-3">
                        <p>
                            1st col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            2nd col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            3rd col 3
                        </p>
                    </div>
                    <div class="col-md-3">
                        <p>
                            4th col 3
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Ответ 4

Посмотрите пример начальной загрузки не нужно добавлять классы container или container-fluid или col-* с помощью modal-body или внутри modal-body

<div class="modal-body">
  <div class="row">
    <div class="col-md-3">
      <p>1st col 3</p>
    </div>
    <div class="col-md-3">
      <p>2nd col 3</p>
    </div>
    <div class="col-md-3">
      <p>3rd col 3</p>
    </div>
    <div class="col-md-3">
      <p>4th col 3</p>
    </div>
  </div>
</div>

см. здесь

Ответ 5

Из документов

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

http://getbootstrap.com/javascript/#modals-grid-system

Ответ 6

Модифицировать Bootstrap можно с помощью сброса ширины контейнера:

.modal-body {padding: 5px}

.modal-dialog {
@media(min-width: $screen-sm-min){
  width: 600px;
  .container {
    width: 590px;
  }
}

@media(min-width: $screen-md-min){
  width: 800px;
  .container {
    width: 790px;
  }
}

@media(min-width: $screen-lg-min){
  width: 1000px;
  .container {
    width: 990px;
  }
}
}

Ответ 7

Для Bootstrap 4 вы можете создать модальный контейнер с SCSS.

Класс .modal-container должен быть добавлен в .modal-dialog

Переменные:

$modal-container-max-widths: (
  xs: 90%,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
);

Кодирование:

@mixin make-modal-max-widths-container-width($max-widths: $modal-container-max-widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $modal-container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
        max-width: $modal-container-max-width;
    }
  }
}
.modal-container{
   @include make-modal-max-widths-container-width();
}

Рекомендуется дополнительный CSS.

.modal-container{
  margin-left: auto;
  margin-right: auto;
  padding-left: ($spacer / 2);
  padding-right: ($spacer / 2);
}