Question

以下代码正常运行：

<div class="modal fade" id="Edit" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" style="text-align: center">
                <div class="row">
                    <div class="col-sm-4">
                        <asp:TextBox ID="EditCidade" runat="server" CssClass="form-control"></asp:TextBox>
                    </div>
                    <div class="col-sm-4">
                        <asp:TextBox ID="EditEmpresa" runat="server" CssClass="form-control"></asp:TextBox>
                    </div>
                    <div class="col-sm-4">
                        <asp:TextBox ID="EditFuncionario" runat="server" CssClass="form-control"></asp:TextBox>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这三个文本框位于同一行，占用了33％的空间。但后来我尝试将模态放在IFrame中，三个文本框再次占据整行，“col-sm-4”似乎没有任何效果。

<div class="modal fade" id="Edit" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <iframe runat="server" id="editIFrame" style="width: 100%; height: 270px" frameborder="0" src="EditField"></iframe>
        </div>
    </div>
</div>

和IFrame本身：

<body>
    <form id="form2" runat="server">
       <div class="modal-body" style="text-align: center">
            <div class="row">
                <div class="col-sm-4">
                    <asp:TextBox ID="EditCidade" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
                <div class="col-sm-4">
                    <asp:TextBox ID="EditEmpresa" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
                <div class="col-sm-4">
                    <asp:TextBox ID="EditFuncionario" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
            </div>
        </div>
    </form>
</body>

我怀疑＆lt;形式＆GT;与它有关，但我不能把它拿走，因为我正在使用ASP ... 或者它是IFrame的宽度/高度......无论如何，我不知道如何解决它，我需要帮助。

Answer 1

iframe标记是在页面中插入一个全新的文档。我认为您需要在iframe内容中再次链接bootstrap。 Bootstrap网格系统还需要'container'或'container-fluid'类作为行的父级：

<body>
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <form id="form2" runat="server">
                    <!--added container class -->
       <div class="modal-body container" style="text-align: center">
            <div class="row">
                <div class="col-sm-4">
                    <asp:TextBox ID="EditCidade" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
                <div class="col-sm-4">
                    <asp:TextBox ID="EditEmpresa" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
                <div class="col-sm-4">
                    <asp:TextBox ID="EditFuncionario" runat="server" CssClass="form-control"></asp:TextBox>
                </div>
            </div>
        </div>
    </form>
</body>

Answer 2

我找到的解决方案是创建这个类：

.iframe-container {
        position: relative;
        overflow: hidden;
    }

        .iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

然后让你的iFrame使用它，例如：

<iframe src='@Url.Action("ForgotPassword", "Account")' class="iframe-container" width="100%" height="500" frameBorder="0" name="Forgot_Iframe"> 
  </iframe>

这将确保bootstrap网格系统适用于您的模态iFrame。解决方案取自：https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

Bootstrap网格在iframe内部无效

2 个答案: