在模态中使用网格/行

Question

我正在尝试使用 Bootstrap 3 网格系统，但我运行在将它与模式一起使用时遇到问题/困惑。

基本上我看到的是，当我向模态主体添加行时，内容经常溢出模态主体。那么让模态主体拥有自己的 "container" 的最佳方法是什么，这样它就有自己的网格。我已经在我页面的主要部分使用了 .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 > row > 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

在模态中使用网格/行

Use Grid / Row in Modal

twitter-bootstrap

twitter-bootstrap-3