Question

我正在尝试使用Bootstrap 3网格系统，并且在使用Modals时遇到问题/混淆。

基本上我所看到的是当我向模态体添加行时，内容通常会溢出模态体。那么什么是使模态体具有自己的“容器”的最佳方法，因此它有自己的网格。我已经在页面的主要部分使用.container了，我读过你不应该嵌套.container或.container-fluid。

我正在寻找的是一些最佳实践或解释为什么我会看到一些意想不到的渲染。

我应该这样做：

<div class="modal-body row">
    ...
</div>

或者这个：

<div class="modal-body">
  <div class="row">
    ....
  </div>
</div>

或者这个：

<div class="modal-body">
  <div class="col-xs-12">
    ....
  </div>
</div>

这是一个人为的例子：（http://plnkr.co/edit/5vOppLmuRBqH3RAHfynT）

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <header class="container">
    <div class="row">
      <h1 class="text-center">This is the Header</h1>
    </div>
    <p class="col-xs-3">Header Info Right</p>
    <p class="col-xs-9">Header Info Left</p>
  </header>
  <section class="container">
    <div class="row">
      <div class="col-xs-3">
        <ul>
          <li>Col1</li>
          <li>Col1</li>
        </ul>
        <div class="row">
          <div class="col-xs-2 col-xs-offset-4">
            <button type="button" class="btn btn-primary btn-sm pull-left" data-toggle="modal" data-target="#modal1">
              <span class="glyphicon glyphicon-new-window"></span>
            </button>
            <!-- Modal -->
            <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-sm">
                <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="myModalLabel">Modal title</h4>
                  </div>
                  <div class="modal-body">
                    <div class="col-xs-12">
                      <hr/>
                      <hr/>
                      <div class="row">
                        <h1 class="text-center">Modal for Col 1</h1>
                      </div>
                      <hr/>
                      <div class="row">
                        <div class="col-xs-3">
                          <ul>
                            <li>Modal Col1</li>
                            <li>Modal Col1</li>
                          </ul>
                        </div>
                        <div class="col-xs-6">
                          <ul>
                            <li>Modal Col2</li>
                            <li>Modal Col2</li>
                          </ul>
                        </div>
                        <div class="col-xs-3">
                          <div class="row">
                            <ul>
                              <li>Modal Col3</li>
                              <li>Modal Col3</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-6">
        <ul>
          <li>Col2</li>
          <li>Col2</li>
        </ul>
      </div>
      <div class="col-xs-3">
        <ul>
          <li>Col3</li>
          <li>Col3</li>
        </ul>
      </div>
    </div>
  </section>
  <footer class="container">
    <div class="row">
      <hr/>
      <p class="col-xs-6">Footer Info Right</p>
      <p class="col-xs-6">Footer Info Left</p>
    </div>
  </footer>
</body>

</html>

Answer 1

我认为在modal-body内你应该container-fluid＆gt; row＆gt; col-*

                  <div class="modal-body">
                    <div class="container-fluid">
                     <div class="row">
                         (columns and more nested row/cols here)  
                     </div><!--/row-->
                    </div><!--/container-fluid-->
                  </div><!--/modal-body-->

演示：http://bootply.com/sQbChOGPkS

在模态中使用网格/行

1 个答案: