Les éléments HTML se chevauchent

J'essaie de créer une page de connexion. Le problème est que lorsque j'essaie de minimiser la page, la case à cocher de copie de sauvegarde et le bouton d'envoi se chevauchent. Je suppose que j'ai besoin de changer quelque chose dans le CSS. Mais je ne sais pas exactement quoi. Voici le lien: https://jsfiddle.net/talamusiclover/ctqgkxcw/Les éléments HTML se chevauchent

<!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>

Source

2017-05-23 user8050674

Vous pouvez utiliser pull-right classe pour garder la case à côté droit. Alors ça va.

Source

2017-05-23 00:09:57

Supprimer la position : relative; de votre bouton css, puis votre code CSS pour le bouton est:

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

Le problème est que votre code HTML utilisé système de grille d'amorçage pendant que vous réécrites dans votre css file.You peut en savoir plus sur Bootstrap ici Bootstrap

Source

2017-05-23 00:44:36

Les éléments HTML se chevauchent

Répondre

Questions connexes