Как я могу контролировать размер контейнера в Html / Bootstrap? - PullRequest
Новая
       13

Как я могу контролировать размер контейнера в Html / Bootstrap?

0 голосов
/ 09 июля 2020

Я следил за некоторыми уроками и пытался собрать вместе карты листовок и какую-то форму. Пока это работает, но class="row" элемента div создает невидимый контейнер, который блокирует функциональные возможности карты, где оба перекрываются. Как я могу контролировать размер этого контейнера, или можно ли перемещать только сам контейнер в фоновом режиме? 

    <!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>

введите описание изображения здесь

Ответы [ 2 ]

1 голос
/ 09 июля 2020

если у вас все в порядке с абсолютной позиционной формой, это работает 

<!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>
0 голосов
/ 09 июля 2020

Вы можете указать ширину и высоту стиля вот так 

.row{
 width:200px;
 height:200px
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...