在 Bootstrap 模式弹出窗口中设置内容

Question

我想在里面显示我的所有内容 bootstrap Modal Body.But 它正在向 modal body 输出。

<div class="modal fade" tabindex="-1" role="dialog" id="blockModel">
<div class="modal-dialog">
    <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">Blocked Users</h4>
        </div>
        <div class="modal-body">
                    <span class="blocktag label label-info">
                        <span >Tag 1</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

                     <span class="blocktag label label-info">
                        <span >Tag 2</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

                     <span class="blocktag label label-info">
                        <span >Tag 3</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

                     <span class="blocktag label label-info">
                        <span >Tag 4</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

                     <span class="blocktag label label-info">
                        <span >Tag 5</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

                     <span class="blocktag label label-info">
                        <span >Tag 6</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

                     <span class="blocktag label label-info">
                        <span >Tag 1</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

                     <span class="blocktag label label-info">
                        <span >Tag 7</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

                     <span class="blocktag label label-info">
                        <span >Tag 8</span>
                        <a  title="Remove" class="unblockUsers"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a>
                    </span>

        </div>

    </div><!-- /.modal-content -->
</div>

</div>

当正文内容较大时，模态正文应自动扩展高度。

JsFiddle

Answer 1

当您的 .blocktag 跨度向左浮动时，它们会在容器外呈现。您可以将 clearfix 添加到 modal-body 以防止这种情况发生：

<div class="modal-body clearfix">

Answer 2

好的，这对我有用：

JSFiddle

我更改的是添加

height: auto;

到 bootstrap.min.css 第 7 行的 .model-dialog。

然后到 bootstrap.min.css 第 7 行的 model-body。

display: inline-block;
height: 100%;

希望对你有帮助！

Answer 3

你真的应该遵守Bootstrap的架构。它会让你减少错误。如果您使用它的行和列类，您将能够更有效地扩展和维护这些模态。

在您的 modal-body 和内容之间，添加一行和一列，大小如下：

       <div class="modal-body">
          <div class="row">
            <div class="col-xs-12">
              ...my content here...
            </div>
          </div>
       </div>

这样做的好处是，如果您想要拆分此内容，您可以使用其 col-xs-* 类进行拆分。 可维护性 是使用 Bootstrap 时的关键 ;)

使用 Bootstrap 的架构

查看您的 jfiddle

在 Bootstrap 模式弹出窗口中设置内容

Set Content Inside Bootstrap modal popup

html

css

jquery

bootstrap-modal