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 ，.col- 放置在.row s 中，它们将垂直包装/堆叠

在网格布局中，内容必须放在列中，仅列可能是 行的直接子项 。

因此，如果您不希望列包装/堆叠，则它们必须包含在.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>

Web表单在iframe内部无法正常显示

1 个答案: