如何处理从bs4中的容器溢出的按钮?

时间:2019-07-15 07:24:16

标签: css bootstrap-4

所以我创建了一个登录页面,但是登录,取消和注册按钮将从容器中溢出。我该如何解决这个问题,我试图更改我什至尝试用0结果搜索到Google的利润。这是我的代码。

代码: 格式的HTML代码:

<!DOCTYPE html>
   <html lang="en">
       <head>
          <title>Login</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial- 
          scale=1">
          <link rel="stylesheet" 
           href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1
          /css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/
               jquery/3.4.1/jquery.min.js"> 
          </script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/
           popper.js/1.14.7/umd/popper.min.js"></script>
          <scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/
           js/bootstrap.min.js"> 
           </script>
           <link rel = "stylesheet" href = "Stylesheet_form.css">
        </head>
        <!--Javascript-->
        <script>
           (function() {
               'use strict';
                   window.addEventListener('load', function() {
                   var forms = document.getElementsByClassName('needs- 
                   validation');
                   var validation = Array.prototype.filter.call(forms, 
                      function(form) {
                         form.addEventListener('submit', function(event) 
                      {
                         if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                          }
                           form.classList.add('was-validated');
                           }, false);
                        });
                          }, false);
                         })();
           </script>    
           <body class = "main">
                <div class="container">
                   <h2>Login</h2>
                      <fo rm action="action_page.php" class="needs- 
                       validation" novalidate>
                          <div class="form-group">
                             <label for="StudentId">StudentId:</label>
                             <input type="text" class="form-control" 
                              id="StudentId" placeholder="Enter 
                              StudentId" name="StudentId" required>
                              <div class="valid-feedback">Valid. 
                              </div>
                              <div class="invalid- 
                              feedback">Please fill out this 
                              field.</div>
                           </div>
                           <div class="form-group">
                               <label for="password">Password:</label>
                               <input type="password" class="form- 
                                control" id="n/p" placeholder="Password" 
                                name="Password" required>
                                <div class="valid-feedback">Valid.</div>
                                <div class="invalid-feedback">Please 
                                 fill out this field.</div>
                            </div>
                            <div id = "forget">
                                <a href="#">Forget Password</a>
                            </div>
                            <button id="login" type="submit" class="btn 
                             btn-success">Login</button>
                            <div class = "btn-group">
                               <button id="register" type="submit" 
                                class="btn btn- 
                                primary">Register</button>
                               <button id="cancel" type="submit" 
                                class="btn btn-danger">Cancel</button>
                             </div>
                      </form>
               </div>
        </body>
  </html>

CSS

 .main{
     background-color: rgb(2,48,97);
     font-family: 'Roboto','Microsoft YaHei', 'Microsoft JhengHei', 
     sans- serif;
     padding:0;
     margin:0px;
    /*background-image: url("Images/background.jpg");
    background-repeat:no-repeat;
    background-position: center;
    background-size: auto;*/
  }

h2{
   text-align: center;
}

.container{
    background-color: rgb(233,233,233);
    margin-top:80px;
    height: 448px;
    padding-top:20px;   
  }

.form{
   padding-top:20px;
}

#forget{
   font-size: 15px;
}

#login{
   width: 1050px;
   margin:30px 20px 0px 20px;
   font-size: 19px;
 }

#cancel.btn-primary{
    width:77px;
 }

.btn-group{
    margin:15px 20px 0px 20px;
    width: 1050px;
    display: flex;
 }

结果:

My result

谢谢您的帮助。 抱歉,如果我有很多代码。 bla bla (只需忽略此评论部分)

3 个答案:

答案 0 :(得分:1)

遵循这些基本修补程序

.main{
       background-color: rgb(2,48,97);
       font-family: 'Roboto','Microsoft YaHei', 'Microsoft JhengHei', 
       sans- serif;
       padding:0;
       margin:0px;
    }

h2{
   text-align: center;
}

.container{
    background-color: rgb(233,233,233);
    margin-top:80px;
    height: 448px;
    padding-top:20px; 
    width: 960px;  
  }

.form{
   padding-top:20px;
}

#forget{
   font-size: 15px;
}

#login{
   width: 960px;
   margin:30px 20px 0px 20px;
   font-size: 19px;
 }

#cancel.btn-primary{
    width:77px;
 }

.btn-group{
    width: 100%;
    display: flex;
 }
<!DOCTYPE html>
   <html lang="en">
       <head>
          <title>Login</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial- 
          scale=1">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
          </script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> 
           </script>
        </head>
        <!--Javascript-->
 
           <body class = "main">
                <div class="container">
                   <h2>Login</h2>
                      <form action="action_page.php" class="needs- 
                       validation" novalidate>
                          <div class="form-group">
                             <label for="StudentId">StudentId:</label>
                             <input type="text" class="form-control" id="StudentId" placeholder="Enter StudentId" name="StudentId" required>
                              <div class="valid-feedback">Valid.</div>
                              <div class="invalid-feedback">Please fill out this field.</div>
                           </div>
                           <div class="form-group">
                               <label for="password">Password:</label>
                               <input type="password" class="form-control" id="passowrd" placeholder="Password" name="Password" required>
                                <div class="valid-feedback">Valid.</div>
                                <div class="invalid-feedback">Please fill out this field.</div>
                            </div>
                            <div class="form-group">
                                <a href="#">Forget Password</a>
                            </div>

                            <div class="form-group">
                                <button type="submit" class="btn btn-block btn-success">Login</button>
                            </div> 
                            <div class="btn-group"> 
                                  <button  type="submit" class="btn btn-info">Register</button>
                                  <button type="submit" class="btn btn-danger">Cancel</button>
                              </div>
                            </div>
                            
                      </form>
               </div>
        </body>
  </html>

答案 1 :(得分:0)

您会看到#loginbtn-group在代码中指定了width:1050px。将其设置为width:100%并设置正确的margin

#login{
   width: 100%;
   margin:10px 0;
   font-size: 19px;
 }
.btn-group{
    width: 100%;

    display: flex;
 }

这是工作片段

.main {
  background-color: rgb(2, 48, 97);
  font-family: 'Roboto', 'Microsoft YaHei', 'Microsoft JhengHei', sans- serif;
  padding: 0;
  margin: 0px;
  /*background-image: url("Images/background.jpg");
    background-repeat:no-repeat;
    background-position: center;
    background-size: auto;*/
}

h2 {
  text-align: center;
}

.container {
  background-color: rgb(233, 233, 233);
  margin-top: 80px;
  height: 448px;
  padding-top: 20px;
}

.form {
  padding-top: 20px;
}

#forget {
  font-size: 15px;
}

#login {
  width: 100%;
  margin: 10px 0;
  font-size: 19px;
}

#cancel.btn-primary {
  width: 77px;
}

.btn-group {
  width: 100%;
  display: flex;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body class="main">
  <div class="container">
    <h2>Login</h2>
    <form action="action_page.php" class="needs- 
                       validation" novalidate>
      <div class="form-group">
        <label for="StudentId">StudentId:</label>
        <input type="text" class="form-control" id="StudentId" placeholder="Enter StudentId" name="StudentId" required>
        <div class="valid-feedback">Valid.
        </div>
        <div class="invalid-feedback">Please fill out this field.
        </div>
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" class="form-control" id="n/p" placeholder="Password" name="Password" required>
        <div class="valid-feedback">Valid.</div>
        <div class="invalid-feedback">Please fill out this field.</div>
      </div>
      <div id="forget">
        <a href="#">Forget Password</a>
      </div>
      <button id="login" type="submit" class="btn 
                             btn-success">Login</button>
      <div class="btn-group">
        <button id="register" type="submit" class="btn btn-info">Register</button>
        <button id="cancel" type="submit" class="btn btn-danger">Cancel</button>
      </div>
      </form>
  </div>
</body>

答案 2 :(得分:0)

您应该具有100%的宽度减去两侧的边距

Codepen link

#login{
       width: calc(100% - 40px);
   margin:30px 20px 0px 20px;
   font-size: 19px;
 }

.btn-group{
    margin:15px 20px 0px 20px;
        width: calc(100% - 40px);
    display: flex;
 }