Bootstrap Modal Dialog. Kann das Grid-System in einem modalen Kontext verwendet werden?

Question

Ich habe einen Bootstrap modalen Dialog, für den ich die verschiedenen Beschriftungen und Eingaben gestalten möchte. Ich habe versucht, Zeilen/Spalten-Klassen zu verwenden, aber sie scheinen nichts zu tun. Was sind meine Möglichkeiten hier?

Danke,
Doug

Answer 1

Ich habe es ok arbeiten ... http://www.bootply.com/WAwE3QyUdb

hinzufügen col auf den Behälter innerhalb des modal-Körper.

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

Answer 2

einfach die Zeile Klasse zu Ihrem modalen hinzufügen gemäß dem nachfolgenden Code und dann können Sie Ihre modal aufzuteilen, wie Sie wollen:

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

Answer 3

Sie können die Bootstrap modal anspricht, indem es den Behälter zurückzusetzen Weiten:

.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; 
    } 
} 
} 

Answer 4

Tom Rudges Antwort hat mich inspiriert. Sie müssen den Container auch nicht zu einer Spalte mit voller Breite machen, worauf Matt Dell hingewiesen hat, die Linters versagt.

Machen Sie den Container Container-Fluid stattdessen!

bootply showing col-md-12 and container-fluid side by side

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

Answer 5

haben einen Blick bootstrap example keine Notwendigkeit container oder container-fluid oder col-* Klassen mit modal-body oder in 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> 

see here

Answer 6

Von der Dokumentation hinzufügen

<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