提问者:小点点

如何在Html/Bootstrap中控制容器的大小?


我遵循了一些教程,并尝试将传单,地图和一些表格汇集在一起。 到目前为止,这是可行的,但是div元素的class=“row”创建了一个不可见的容器,它阻止了两者重叠的映射功能。 我如何控制这个容器的大小,或者是否有可能在后台只移动容器本身?

<html>
<head>
    <title>User Registration | PHP</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

</head>
<body
<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>

</body>


共2个答案

匿名用户

试试这个

修改了html(修改了主体标记,并在主div中添加了类)

<html>
<head>
    <title>User Registration | PHP</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

</head>
<body>
<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>

</body>

并添加此css

.bypass-mouse-input * {
pointer-events: none;
}

.bypass-mouse-input form input, .bypass-mouse-input form label {
pointer-events: auto;
}

匿名用户

您可以像这样给样式宽度和高度

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