web-dev-qa-db-fra.com

Boîte de dialogue modale bootstrap. Le système de grille peut-il être utilisé dans un contexte modal?

J'ai une boîte de dialogue modale Bootstrap pour laquelle je souhaite disposer les différentes étiquettes et entrées. J'ai essayé d'utiliser des classes ligne/colonne mais elles ne semblent rien faire. Quelles sont mes options ici?

Merci,
Doug

twitter-bootstrapmodal-dialog
16
dugla

Je l'ai bien fonctionné ... http://www.bootply.com/WAwE3QyUdb

Ajoutez un col au conteneur à l'intérieur du corps modal.

<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>
44
Tom Rudge

Ajoutez simplement la classe row à votre modal selon le code ci-dessous et vous pourrez ensuite diviser votre modal à votre guise: 

<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>
12
dmeehan

La réponse de Tom Rudge m'a inspiré. Il n'est pas nécessaire que le conteneur soit également une colonne de pleine largeur, ce que Matt Dell a signalé comme défaillant.

Faites le conteneur contenant le fluide à la place!

bootply montrant col-md-12 et le fluide de conteneur côte à côte

<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>
6
mjohnsonengr

regardez exemple bootstrap pas besoin d'ajouter container ou container-fluid ou col-* classes avec modal-body ou à l'intérieur 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>

vois ici

4
Ismail Farooq

De la docs

<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

2
LucasS

Vous pouvez rendre le modal Bootstrap sensible en réinitialisant les largeurs du conteneur:

.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;
  }
}
}
0
Scott Simpson

Pour Bootstrap 4, vous pouvez créer un conteneur modal avec SCSS. 

La classe .modal-container doit être ajoutée à la .modal-dialog

Variables:

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

Codage:

@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();
}

Quelques CSS supplémentaires sont recommandés.

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