Question

我有一个Bootstrap模式对话框，我想为其布局各种标签和输入。我尝试过使用行/列类，但它们似乎没有做任何事情。我有什么选择？

谢谢，
道格

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

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

Answer 3

汤姆拉奇的回答激发了我的灵感。你不需要让容器也是一个全宽的柱子，马特戴尔指出它将会失败。

改为容器容器 - 液体！

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 4

查看bootstrap example无需在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>

see here

Answer 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

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

Answer 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);
}

Bootstrap模态对话框。网格系统可以在模态上下文中使用吗？

7 个答案: