Question

我想在bootstrap 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

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

在你的模态体和内容之间，添加一行和一个像这样的列大小：

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

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

使用Bootstrap的架构

查看您的jfiddle

Answer 2

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

<div class="modal-body clearfix">

Answer 3

好的，这对我有用：

JSFiddle

我改变的是添加

height: auto;

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

然后到bootstrap.min.css第7行的模型体。

display: inline-block;
height: 100%;

我希望能帮到你！

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

3 个答案: