twitter-bootstrap – 在模态中使用网格/行

发布时间：2020-12-17 20:38:09 所属栏目：安全来源：网络整理

导读：我正在尝试使用Bootstrap 3网格系统,并且在使用Modals时遇到问题/混淆. 基本上我所看到的是当我向模态体添加行时,内容经常溢出模态体.那么什么是使模态体具有自己的“容器”的最佳方法,因此它有自己的网格.我已经在页面的主要部分使用.container了,我读过你

我正在尝试使用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>

解决方法

我认为在模态体内你应该有一个容器流体>行>同事*

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!