Question

我遵循了一些教程，并试图将传单地图和某种形式结合在一起。到目前为止，该方法仍然有效，但是div元素的class="row"创建了一个不可见的容器，该容器在两个重叠的位置都阻止了地图功能。如何控制此容器的大小，还是可以仅在后台移动容器本身？

    <!DOCTYPE html>
<html>
<head>
    <title>User Registration | PHP</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <title>Leaflet + Mapbox test</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
   
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
   
    <style>
        #mapid {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1}
    </style>
       
</head>
      
      
<body onload="init()"> 
      
      
<div>
    <form action="registration.php" method="post" id="reg">
        <div class="container">
            
            <div class="row" id="con">
                <div class="col-sm-3">
                    <h1>Registration</h1>
                    <p>Fill up the form with correct values.</p>
                    <hr class="mb-3">
                    
                        <label for="firstname"><b>First Name</b></label>
                        <input class="form-control" id="firstname" type="text" name="firstname" required>

                        <label for="lastname"><b>Last Name</b></label>
                        <input class="form-control" id="lastname"  type="text" name="lastname" required>

                        <label for="email"><b>Email Address</b></label>
                        <input class="form-control" id="email"  type="email" name="email" required>

                        <label for="phonenumber"><b>Phone Number</b></label>
                        <input class="form-control" id="phonenumber"  type="text" name="phonenumber" required>

                        <label for="password"><b>Password</b></label>
                        <input class="form-control" id="password"  type="password" name="password" required>
                    
                    <hr class="mb-3">
                    <input class="btn btn-primary" type="button" id="register" name="create" value="Sign Up">
                </div>
            </div>
        </div>
    </form>
</div>
      
        
        
<div id="mapid">
    <script type="text/javascript">
        function init() {
        // create map and set center and zoom level
        var map = new L.map('mapid');
        map.setView([47.000,-120.554],13);
            
        var mapboxTileUrl = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
            
        L.tileLayer(mapboxTileUrl, {
        attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
        }).addTo(map);         
          }  
    </script>
</div>   
</body>
</html>

Answer 1

如果您可以使用绝对定位形式，则可以使用

<!DOCTYPE html>
<html>
<head>
    <title>User Registration | PHP</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <title>Leaflet + Mapbox test</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
   
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
   
    <style>
        #mapid {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1}
        .bypass-mouse-input{
            position: absolute;
        }
        .bypass-mouse-input,.bypass-mouse-input * {
            pointer-events: none;
        }

        .bypass-mouse-input form input, .bypass-mouse-input form label {
            pointer-events: auto;
        }
    </style>
       
</head>
      
      
<body onload="init()"> 
      
      
<div class='bypass-mouse-input'>
    <form action="registration.php" method="post" id="reg">
        <div class="container">
            
            <div class="row" id="con">
                <div class="col-sm-3">
                    <h1>Registration</h1>
                    <p>Fill up the form with correct values.</p>
                    <hr class="mb-3">
                    
                        <label for="firstname"><b>First Name</b></label>
                        <input class="form-control" id="firstname" type="text" name="firstname" required>

                        <label for="lastname"><b>Last Name</b></label>
                        <input class="form-control" id="lastname"  type="text" name="lastname" required>

                        <label for="email"><b>Email Address</b></label>
                        <input class="form-control" id="email"  type="email" name="email" required>

                        <label for="phonenumber"><b>Phone Number</b></label>
                        <input class="form-control" id="phonenumber"  type="text" name="phonenumber" required>

                        <label for="password"><b>Password</b></label>
                        <input class="form-control" id="password"  type="password" name="password" required>
                    
                    <hr class="mb-3">
                    <input class="btn btn-primary" type="button" id="register" name="create" value="Sign Up">
                </div>
            </div>
        </div>
    </form>
</div>
      
        
        
<div id="mapid">
    <script type="text/javascript">
        function init() {
        // create map and set center and zoom level
        var map = new L.map('mapid');
        map.setView([47.000,-120.554],13);
            
        var mapboxTileUrl = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
            
        L.tileLayer(mapboxTileUrl, {
        attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
        }).addTo(map);         
          }  
    </script>
</div>   
</body>
</html>

Answer 2

您可以这样指定样式的宽度和高度

.row{
 width:200px;
 height:200px
 }

如何在HTML / Bootstrap中控制容器的大小？

2 个答案: