Question

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

＆＃13;

  <!DOCTYPE>
    <html ng-app="myApp">
    
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    	<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">
        	<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>

＆＃13;

Answer 1

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

Answer 2

从按钮css中删除位置：relative; ，然后按下该按钮的css：

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

问题是，当您在css文件中覆盖它们时，您的HTML代码使用了引导网格系统。您可以在此处阅读有关Bootstrap的更多信息Bootstrap

HTML元素重叠

2 个答案: