如何将Bootstrap Modal分成4列？

Question

我正在尝试将 Modal 放入 button 中，这将显示我输入的一些数据。我几乎已经设法让它工作了，但还没有完全成功。我有以下代码：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-lg">
     <div class="container-fluid modal-body">
        <div class="row">
         <div class="col-md-3">
             <p>
                 c1
                </p>
            </div>
            <div class="col-md-3">
                <p>
                    c2
                </p>
            </div>
            <div class="col-md-3">
                <p>
                  c3
                </p>
            </div>
            <div class="col-md-3">
                <p>
                  c4
                </p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal">Close</button>
            </div>
        </div>
        </div>
    </div>
</div>

我无法解决的问题是它是透明的，关闭按钮应该在右下方。任何想法如何解决它？

你可以在这里看到它的实际效果：https://www.bootply.com/XkRrihCeJx（我把它放在 bootply 上，因为它在我的网站上看起来就是这样，使用 Stack Snippets 看起来不一样。希望没关系).

Answer 1

试试这个。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <p>
                        c1
                    </p>
                </div>
                <div class="col-md-3">
                    <p>
                        c2
                    </p>
                </div>
                <div class="col-md-3">
                    <p>
                      c3
                    </p>
                </div>
                <div class="col-md-3">
                    <p>
                      c4
                    </p>
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
</div>

我希望你在这个答案中找到了解决方案

Answer 2

尝试创建一个 container 或 container-fluid div，里面有一个 row div，然后将 row div 在其中设置四个 col-md-3（或 col-lg-3，具体取决于视口）。

Answer 3

您似乎错过了 .modal-content class 添加。只需在 div with class modal-dialog.

之后添加 div with .modal-content class

例如：

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="container-fluid modal-body">
      ...............
    </div>
  </div>
</div>

Answer 4

将 col-3 的四列放在一行中。（根据视口调整col-md-3、col-lg-3）。

如何将Bootstrap Modal分成4列？

How to divide Bootstrap Modal into 4 columns?

modal-dialog

twitter-bootstrap

bootstrap-4