Bootstrap / css / html：点击不处理输入和glyphicon未正确对齐

时间：2017-05-31 21:30:49

标签： html css twitter-bootstrap

我的表单有以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


  <link rel="stylesheet" type="text/css" href="flags.min.css">
  <link rel="stylesheet" type="text/css" href="css2.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <link rel="stylesheet" href="build/css/intlTelInput.css">
  <script src="google/jquery-1.11.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>


<style>

.d-flex {
    display: flex;
    flex-direction: column;
    height: 89vh;

}

.flex-grow {
    flex-grow:1;
    height: 100%;
}

#grad1 {
    background: -webkit-linear-gradient(to right, rgba(243,116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important; /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(to right, rgba(243, 116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important; /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(to right, rgba(243, 116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important; /* For Fx 3.6 to 15 */
    background: linear-gradient(to right, rgba(243, 116, 35), rgba(243, 116, 35, 0.8), rgba(243, 116, 35)) !important;/* Standard syntax (must be last) */
    background: -webkit-linear-gradient(left, #F37423,#F37423,#F79831 50%,#F37423,#F37423);
    background: -ms-linear-gradient(left, #F37423,#F37423,#F79831 50%,#F37423,#F37423);

}


.active a{
    color: #F37423 !important;
    background-color: transparent !important;
}

/* enable absolute positioning */
.inner-addon {
  position: relative;
}

/* style glyph */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align glyph */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

/*select:invalid { color: gray; }
*/


</style>

<body>


<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
      <div class="navbar-header page-scroll">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="index.php">
          <img src="logo.svg" alt="Nice coconut tree"/>
        </a>

      </div>



      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav navbar-right">
          <li class="hidden"><a href="index.php"></a></li>
          <li><a href="principe.php">LE PRINCIPE</a></li>
          <li><a href="inscription.php">INSCRIPTION</a></li>
          <li><a href="espace.php">ESPACE CLIENT</a></li>
          <li><a href="apropos2.php">A PROPOS</a></li>
          <li><a href="#">NOS ENGAGEMENTS</a></li>
          <li><a href="#"><img class="flag flag-gb" alt="" /></a></li>
        </ul>

      </div>
      <!-- <hr style="padding-top: 0px;margin-top: 0px;width: 90%;height: 1px; background-color: #BEBEBE;"> -->
    <hr style="padding-top: 0px;margin-top: 0px;width: 90%;margin-bottom: 0px;padding-bottom: 0px;height: 1px; background-color: #BEBEBE;">
  </div>

</nav>


<script src="jquery.bootstrap-autohidingnavbar.min.js"></script>

<script>

window.addEventListener("scroll", function() {
    if (window.scrollY > 20) {
        $('.navbar').fadeOut();
    }
    else {
        $('.navbar').fadeIn();
    }
},false);


var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');

// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

</script>







<div class="container">

  <div class="row flex-grow">


    <div class="col-xs-offset-1 col-xs-10 col-lg-12 col-lg-offset-0">

      <div class="row">
        <br>
        <h1>inscription</h1>
        <hr style="padding-top:0px;margin-top:0px; border: 1px solid;"> 
      </div>

      <br><br><br>

      <div class="row" id="grad1" style="padding-top: 3%;">


            <div class="col-lg-8 col-lg-offset-2">

            Nous sommes sincèrement  très heureux<br>
            Nous vous remercions de bien  :

            </div><br>

      </div>

      <div class="row" id="grad1">
      <br>


          <div class="col-xs-offset-1 col-xs-10 col-lg-offset-4 col-lg-4">

                <form method="post" action="serv2.php" onsubmit="return submitForm(this);"> <!-- onsubmit="return submitForm(this);" -->

                  <fieldset>

                    <div class="row">

                      <div class="form-group col-lg-6">
                      <label for="sexe" class="radio bold" style="color:white;">
                      <input type="radio" name="sexe" id="mr">Homme</label>
                      </div>


                      <div class="form-group col-lg-6">
                        <label for="sexe" class="radio bold" style="color:white;">
                        <input type="radio" name="sexe" id="mme">Femme</label>
                      </div>


                      <div class="form-group col-lg-6 prenom" style="padding-left: 0px;">
                        <input type="text" id="prenom" name="prenom" class="form-control" placeholder="Prénom"/>
                      </div>


                      <div class="form-group col-lg-6 nom" style="padding-left: 0px;padding-right: 0px">
                        <input type="text" id="nom" name="nom" class="form-control" placeholder="Nom"/>
                      </div>

                        <div class="form-group">
                          <div class="inner-addon right-addon">
                            <i class="glyphicon glyphicon-user"></i>
                            <input type="text" id="mail" name="mail" class="form-control" placeholder="Email" />
                          </div>
                        </div>


                        <div class="form-group">
                          <div class="inner-addon right-addon">
                            <i class="glyphicon glyphicon-lock"></i>
                            <input type="password" id="mdp1" name="mdp1" class="form-control" placeholder="Mot de passe (8 caractères min.)" />
                          </div>
                        </div>



                        <div class="form-group">
                          <div class="inner-addon right-addon">
                            <i class="glyphicon glyphicon-lock"></i>
                            <input type="password" id="mdp2" name="mdp2" class="form-control" placeholder="Confirmer le mot de passe" />
                          </div>
                        </div>



                        <div class="form-group">


                      <?php
                        $selected = '';

                        echo '<select class="form-control" id="annee" name="annee">',"\n";
                        echo '<option value="" disabled selected hidden>Année de naissance</option>';
                        for($i=1900; $i<=2017; $i++)
                        {
                          if($i == date('Y'))
                          {
                            $selected = ' selected="selected"';
                          }
                          echo "\t",'<option value="', $i ,'"','>', $i ,'</option>',"\n";
                          $selected='';
                        }
                        echo '</select>',"\n";
                      ?>

                        </div>


                          <div class="form-group col-lg-6 col-lg-offset-3">
                            <div>
                              <label for="bouton"><br></label>
                              <div>
                                <button type="submit" class="btn btn-default" style="background-color: #00B0F0; color:white; width: 100%;border:none;">Valider</button>
                              </div>
                            </div>
                          </div>

                          <div class="form-group col-lg-3">
                            <div>
                              <label for="message"><br></label>
                              </div>
                                <span class="form-control hide" id="error-msg" style="border:none; color: red; background-color:#ED7D31;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;">mots de passe différents</span>

                           </div>

                    </div>

                  </fieldset>

                </form>
            </div>



      </div>


      <div class="row" id="grad1">


            <div class="col-lg-8 col-lg-offset-2" style="padding-bottom: 3%;">
            Après validation vous allez immédiatement reçevoir un Email qui vous permettra
            </div>

      </div>


    </div>

  </div>

</div>

</body>

</html>

css2.css：

@media (max-width: 767px) {
    .col-xs-6 {
        margin-top:-20px;
    }
    .col-xs-12{
    text-align:center;
    }
}

@font-face {

    font-family: 'comforta-reg';

    src: url('Comfortaa-Regular.ttf');

}

@font-face {

    font-family: 'comforta-bold';

    src: url('Comfortaa-Bold.ttf');

}

@font-face {

    font-family: 'comforta-light';

    src: url('Comfortaa-Light.ttf');

}


.bold{

    font-family: 'comforta-bold';

}


body { padding-top: 70px;


    font-family: 'comforta-reg', Arial, serif;

 }


.navbar{
    background-color: white;
    border: 0;
    border-color:#25AAE2;
    box-shadow: none;
    -webkit-box-shadow: none;
    padding-top: 20px;
    padding-bottom:0px;
}


.navbar-nav > li{
  /*padding-left:15px;*/
  padding-right:40px;

}

.navbar-brand img {width: 210px;}


.navbar-brand{padding-top: 0px;}


/*#ED7D31;*/
.orange{background-color: #F4862A;} /*Couleur orange*/

.orangeFade{background: radial-gradient(white, #F4862A);}

.row3{background-color: #5F5F5F;}

.indent{ padding-left: 10em;}


.iti-flag {background-image: url("img/flags.png");}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .iti-flag {background-image: url("img/flags@2x.png");}
}

显示：

this

正如您所看到的，glyphicon-user未在电子邮件输入上对齐，而且（不幸的是，您看不到它），当我点击名称和姓氏输入点击无效（即：无法在这些输入上写入），女性无线电按钮也是如此。

我真的没有看到我在这里失踪的东西，我现在正在努力奋斗一个小时，不知道吗？

谢谢

0 个答案:

没有答案
相关问题
最新问题