我该如何编辑背景框的大小以使其通过node.js适应内部框

Question

image of web page

hello I'm making school project for assignment. but I don't know how to change the size of background grey box to make adjust with inside E-mail, password... etc box.

here's my code which I'm struggling.

 {{!-- 회원 가입 페이지 view --}} <br/><br/> <form action="" style-"width: 700px; margin: auto" <div class="jumbotron"> <div class="col-md-5 col-md-offset-5"> <h1>Sign up</h1> {{# if hasErrors}} <div class="alert alert-danger"> {{# each messages}} <p>{{ this }}</p> {{/each}} </div> {{/if}} <form action="/user/signup" method="post" style="width: 500px; margin:auto"> <br/> <div class="form-group"> <label for="email">E-Mail</label> <input type="text" id="email" name="email" class="form-control"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" name="password" class="form-control"> </div> <div class="form-group"> <label for="name">Name</label> <input type="text" id="name" name="name" class="form-control"> </div> <div class="form-group"> <label for="address">Address</label> <input type="text" id="address" name="address" class="form-control"> </div> <div class="form-group"> <label for="phone">Phone</label> <input type="text" id="phone" name="phone" class="form-control"> </div> <input type="hidden" name="_csrf" value="{{ csrfToken }}"> <button type="submit" class="btn btn-primary pull-right">Sign up</button> </form> </div> </div> 

Answer 1

I think it is because you have put everything inside <div class="jumbotron">

Try moving <div class="jumbotron"> inside <div class="col-md-5 col-md-offset-5">

You might have to change the col-md-5 to col-md-6