Web 窗体在 iframe 中无法正确显示

Question

我正在尝试在带有母版页 asp.net Web 应用程序中显示地图。 母版页具有表单标记，以便使用地图创建新表单并创建另一个表单 具有母版页和 iframe 控件的窗体。在该控件中显示 Web 窗体。

我的代码 ：

<asp:Content ID="cntNavigation" ContentPlaceHolderID="cntMain" runat="server">
    <script type="text/javascript">
        function calcHeight(iframeElement) {
            var the_height = iframeElement.contentWindow.document.body.scrollHeight;
            iframeElement.height = the_height;
        }
</script>
   <iframe id="myIframe" src="Tracking.aspx" onload="calcHeight(this)" scrolling="no" style="position:relative;left:0px;width:100%;top:0px;overflow:hidden;padding:0;border:none; " ></iframe>
</asp:Content>

在该"跟踪"表单中使用引导文本框和地图创建，但它无法在应用程序中正确显示

跟踪表单代码 ：

    <div class="card">
        <div class="card-header">
                <strong class="card-title">SalesMan Live Tracking</strong>
        </div>
        <div id="divstrackingbody" class="card-body">
            <div class="col-lg-2" style="margin-top:2%;">
                <label class="col-form-label">Start</label>
            </div>
            <div class="col-lg-2" style="margin-top:2%;">
                <input type="text" name="start" id="start"  class="form-control"/>   
            </div>
             <div class="col-lg-2" style="margin-top:2%;">
                <label class="col-form-label">End</label>
            </div>
            <div class="col-lg-2" style="margin-top:2%;">
                 <input type="text" name="end" id="end" class="form-control"  />
            </div>
            <div class="col-lg-2" style="margin-top:2%;">
                <input type="submit" onclick="calcRoute();"  class="btn btn-success"/>
            </div>
        </div>
        <div id="mapbody" class="card-body">
             <div id="map_canvas" class="map"></div>
        </div>
  </div>

预期：

                ________________               ________________
   Start     : +___textbox______+     End   : +____textbox_____+

展示：

   Start  :
   -----------------------------------------------------------
   +            textbox                                      +
   -----------------------------------------------------------
  End:
   -----------------------------------------------------------
   +          textbox                                       +
   -----------------------------------------------------------

Answer 1

在 Bootstrap 4 中，未放置在 .row s 中的.col-将垂直包装/堆叠。

在网格布局中，内容必须放置在列中，并且只能 列可以是行的直接子级。

因此，如果您不希望列包装/堆叠，则必须将它们包含在.row中......

https://www.codeply.com/go/khfnoOSDMU

 <div class="card">
        <div class="card-header">
                <strong class="card-title">SalesMan Live Tracking</strong>
        </div>
        <div id="divstrackingbody" class="card-body">
        <div class="row">
            <div class="col-lg-2" style="margin-top:2%;">
                <label class="col-form-label">Start</label>
            </div>
            <div class="col-lg-2" style="margin-top:2%;">
                <input type="text" name="start" id="start" class="form-control">   
            </div>
             <div class="col-lg-2" style="margin-top:2%;">
                <label class="col-form-label">End</label>
            </div>
            <div class="col-lg-2" style="margin-top:2%;">
                 <input type="text" name="end" id="end" class="form-control">
            </div>
            <div class="col-lg-2" style="margin-top:2%;">
                <input type="submit" onclick="calcRoute();" class="btn btn-success">
            </div>
        </div>
        <div id="mapbody" class="card-body">
             <div id="map_canvas" class="map"></div>
        </div>
  </div>
</div>