HTML元素重叠

我正在尝试创建一个登录页面。问题是，当我尝试最小化保存复制复选框和发送按钮重叠的页面。我假设我需要改变CSS中的某些东西。但我不确定究竟是什么。这里是链接：https://jsfiddle.net/talamusiclover/ctqgkxcw/HTML元素重叠

<!DOCTYPE> 
 
    <html ng-app="myApp"> 
 
    
 
    \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    \t <link rel="stylesheet" type="text/css" href="C:\Users\etashah\Desktop\email.css"> 
 
    
 
    <div class="container" > 
 
    <div class="row"> 
 
     <div class="col-md-4"></div> 
 
    <div class="col-md-4"> 
 
     \t <form name="myForm" ng-controller="emailController"> 
 
       <div class="form-group1" > 
 
       <label for="exampleInputEmail1">Contacts</label> 
 
       <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" ng-model="email.text" > 
 
       </div> 
 
       <div role="alert"> 
 
        <span class="error alert" ng-show="myForm.$error.required"> 
 
        Required!</span> 
 
        <span class="error alert" ng-show="myForm.$error.email"> 
 
        Not valid email!</span> 
 
       </div> 
 
    
 
      <div class="form-group2"> 
 
      <label for="subject">Subject</label> 
 
      <input type="text" class="form-control" id="subject" placeholder="Subject"> 
 
      </div> 
 
      <div class="form-group3"> 
 
      <label for="message">Message</label> 
 
      <textarea class="form-control" id="message"></textarea> 
 
      </div> 
 
      <div class="blueBox"> 
 
       <div class="form-group"> 
 
       <div class="col-sm-offset-8 col-sm-10"> 
 
        <div class="checkbox"> 
 
        <label class="checkboxLable"><input type="checkbox">Save a copy</label> 
 
        </div> 
 
       </div> 
 
       </div> 
 
       <div class= "button"> 
 
       <div class="col-sm-u-8 col-sm-10"> 
 
        <button type="button" class="btn btn-primary">Send</button> 
 
       </div> 
 
       </div> 
 
       <div style="clear: both;"></div> 
 
      </div> 
 
     </form> 
 
    </div> 
 
      <div class="col-md-4"></div> 
 
     </div> 
 
    
 
     <br><br><br> 
 
    </div> 
 
     <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"> </script> 
 
     <script src= "C:\Users\etashah\Desktop\email\controller.js"> </script> 
 
    
 
    
 
    </body> 
 
    </html>

来源

2017-05-23 user8050674

您可以使用pull-right类，以保持该复选框在右侧。然后它会。

来源

2017-05-23 00:09:57

删除位置：相对;从您的按钮的CSS，那么你的按钮CSS是：

.button { 
color: #4CAF50; 
font-size: 25px; 
border-radius: 30px; 
color: black; 
right: 10px; 
bottom: 30px; 
}

问题是，你的HTML代码中使用自举电网系统，而你在你的CSS覆盖它们file.You可以阅读更多关于引导这里Bootstrap

来源

2017-05-23 00:44:36

回答

相关问题