2016-03-22 26 views
0

Önyükleme kullanıyorum ve yeni. Bu sayfayı yaptım ama neden iPhone 4 gibi küçük cihazlarda radyo düğmelerim sola doğru hizalanmıyor. Lütfen bana aynı nedenini ve şimdiden teşekkür et.Radyo düğmesi doğru şekilde hizalanmadı

<!DOCTYPE html> 
<html lang="en-US"> 
<head> 
<title>Acarrot Do! Sign Up</title> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="css/custom.css" type="text/css"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 

<body data-spy="scroll" data-target=".affix" data-offset="50"> 
<header class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-3 col-sm-2 col-md-2"><img src="images/logo-small.png" style="max-width:70%;height:auto;"> </div> 
    <div class="col-xs-6 col-sm-8 col-md-8 text-center"> 
     <h4>Do This. Get That.</h4> 
    </div> 
    <div class="col-xs-3 col-sm-2 col-md-2 text-right">&nbsp;</div> 
    </td> 
    </tr> 
    </table> 
    </div> 
    </div> 
</header> 
<nav class="navbar"> 
    <div class="container-fluid text-center navbar-static-top"> 
    <p class="big" style="background-color:#524e4d;">Fill the form below to Sign Up</p> 
    </div> 
</nav> 
<!-- Tabs Ends --> 

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-1 col-md-2 col-lg-3">&nbsp;</div> 
    <div class="col-sm-10 col-md-8 col-lg-6"><span class="page-title">Sign Up</span></div> 
    <div class="col-sm-1 col-md-2 col-lg-3">&nbsp;</div> 
    </div> 
</div> 
<!-- Title Ends --> 

<div class="container-fluid"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-sm-1 col-md-2 col-lg-3">&nbsp;</div> 
     <div class="col-sm-10 col-md-8 col-lg-6"> 
     <div class="panel-body"> 
      <p class="big">I am a</p> 
      <form> 
      <div class="form-group"> 
       <label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"> 
       <input type="radio" name="optradio"> 
       <span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4 ">Student</span></label> 
       <label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"> 
       <input type="radio" name="optradio"> 
       <span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4">Teacher</span></label> 
       <label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"> 
       <input type="radio" name="optradio"> 
       <span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4">Parent</span></label> 
      </div> 
      <p class="big">Hello <span class="dark-green-text">Teacher,<br> 
       <br> 
       Please Use your school Email ID</span></p> 
      <div class="form-group"> 
       <input class="form-control input-lg" id="Email" type="text" 
             style="background-color:#5e5653;border-bottom:1px solid #999;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;" 
             placeholder="School Email ID"> 
      </div> 
      <div class="form-group"> 
       <input class="form-control input-lg" id="password9" type="text" placeholder="Password" 
             style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;"> 
      </div> 
      <div class="form-group"> 
       <input class="form-control input-lg" id="password" type="text" 
             placeholder="Confirm Password" 
             style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;"> 
      </div> 
      <div class="checkbox"> 
       <label> 
       <input type="checkbox"> 
       <p class="big">I have read the <a>Terms of Use</a> and <a>Privacy Policy</a></p> 
       </label> 
      </div> 
      <table style="width:100%;" 
            cellpadding="2" cellspacing="2"> 
       <tr> 
       <td>&nbsp;</td> 
       </tr> 
       <tr> 
       <td style="text-align:center;"><a href="signup.html"> 
        <button type="button" class="btn btn-main" style="width:125px;">Sign Up</button> 
        </a><br> 
        <br></td> 
       </tr> 
       <tr> 
       <td>&nbsp;</td> 
       </tr> 
       <tr> 
       <td><table style="text-align: center; width: 100%;" 
               cellpadding="2" cellspacing="2"> 
        <tr> 
         <td width="45%"><img src="images/2px-divider.png" 
                    style="width:100%; height:1px;"></td> 
         <td width="10%"><p class="big"">or</p></td> 
         <td width="45%"><img src="images/2px-divider.png" 
                    style="width:100%; height:1px;"></td> 
        </tr> 
        </table></td> 
       </tr> 
       <tr> 
       <td height="50px">&nbsp;</td> 
       </tr> 
       <tr> 
       <td style="text-align: center;"><a href="#"><img src="images/circles/icon-g+.png"><br> 
        Sign 
        Up with Google+</a></td> 
       </tr> 
      </table> 
      </form> 
     </div> 
     </div> 
     <div class="col-sm-1 col-md-2 col-lg-3">&nbsp;</div> 
    </div> 
    </div> 
</div> 

<!-- Content Ends --> 

<footer class="container-fluid text-center"> <a href="about.html">About Us</a><a href="how-do-works.html">How do! works</a><a href="contact.html">Contact 
    Us</a> 
    </li> 
    </ul> 
</footer> 
</body> 
</html> 

cevap

0

Kaldır etiketten bu yayılma ve

<span class="big col-xs-12 col-sm-12 col-md-4 col-lg-4 ">Student</span> 
0

iç içe <span> etiketi <label> seviyesinde ızgara sütun sınıfları Set değil bizzat içinde yer metin yazmak:

<div class="form-group"> 

     <label class="radio-inline col-xs-12 col-sm-12 col-md-4 col-lg-4" style="border: 1px;border-color: red;border-style: dotted;display: inline-block;display: inline-block;"><input type="radio" name="optradio"> 
     <span class="big">Student</span></label> 

     <label class="radio-inline col-xs-12 col-sm-12 col-md-4 col-lg-4" style="border: 1px;border-color: red;border-style: dotted;display: inline-block;"><input type="radio" name="optradio"> 
     <span class="big">Teacher</span></label> 

     <label class="radio-inline col-xs-12 col-sm-12 col-md-4 col-lg-4" style="border: 1px;border-color: red;border-style: dotted;display: inline-block;"><input type="radio" name="optradio"> 
     <span class="big">Parent</span></label> 

    </div> 
0

Aşağıdaki verilen düzenleme koduna bakınız. Sanırım çözüm. sadece sen çözüm için teşekkürler ama onun şimdi de çalışmıyor, LABEL içindeki SPAN silmek veya başka o SPAN

<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
    <title>Acarrot Do! Sign Up</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" href="css/custom.css" type="text/css"> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
</head> 
 

 
<body data-spy="scroll" data-target=".affix" data-offset="50"> 
 
<header class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-3 col-sm-2 col-md-2"><img src="images/logo-small.png" style="max-width:70%;height:auto;"> 
 
     </div> 
 
     <div class="col-xs-6 col-sm-8 col-md-8 text-center"><h4>Do This. Get That.</h4></div> 
 
     <div class="col-xs-3 col-sm-2 col-md-2 text-right">&nbsp;</div> 
 

 
    </div> 
 
</header> 
 

 

 
<nav class="navbar"> 
 
    <div class="container-fluid text-center navbar-static-top"> 
 
     <p class="big" style="background-color:#524e4d;">Fill the form below to Sign Up</p> 
 
    </div> 
 
</nav> 
 
<!-- Tabs Ends --> 
 

 
<div class="container-fluid"> 
 

 
    <div class="row"> 
 

 
     <div class="col-sm-1 col-md-2 col-lg-3">&nbsp;</div> 
 
     <div class="col-sm-10 col-md-8 col-lg-6"><span class="page-title">Sign Up</span></div> 
 
     <div class="col-sm-1 col-md-2 col-lg-3">&nbsp;</div> 
 

 
    </div> 
 
</div> 
 
<!-- Title Ends --> 
 

 
<div class="container-fluid"> 
 
    <div class="container"> 
 

 
     <div class="row"> 
 

 
      <div class="col-sm-1 col-md-2 col-lg-3">&nbsp;</div> 
 

 
      <div class="col-sm-10 col-md-8 col-lg-6"> 
 

 
       <div class="panel-body"> 
 
        <p class="big">I am a</p> 
 

 
        <form> 
 
         <div class="form-group"> 
 

 
          <label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"><input type="radio" name="optradio"> 
 
           Student</label> 
 

 
          <label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"><input type="radio" name="optradio"> 
 
           Teacher</label> 
 

 
          <label class="radio-inline" style="border: 1px;border-color: red;border-style: dotted"><input type="radio" name="optradio"> 
 
           Parent</label> 
 

 
         </div> 
 
         <p class="big">Hello <span class="dark-green-text">Teacher,<br><br>Please Use your school Email ID</span></p> 
 

 
         <div class="form-group"> 
 
          <input class="form-control input-lg" id="Email" type="text" 
 
            style="background-color:#5e5653;border-bottom:1px solid #999;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;" 
 
            placeholder="School Email ID"> 
 
         </div> 
 
         <div class="form-group"> 
 

 
          <input class="form-control input-lg" id="password9" type="text" placeholder="Password" 
 
            style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;"> 
 
         </div> 
 

 
         <div class="form-group"> 
 

 
          <input class="form-control input-lg" id="password" type="text" 
 
            placeholder="Confirm Password" 
 
            style="background-color:#5c5651;border-bottom:1px solid #999;;border-top:0px;border-left:0px;border-right:0px;border-radius:0px;font-size:20px;color:#7ed490;"> 
 
         </div> 
 

 
         <div class="checkbox"> 
 
          <label><input type="checkbox"> 
 

 
           <p class="big">I have read the <a>Terms of Use</a> and <a>Privacy Policy</a></p></label> 
 
         </div> 
 
         <table style="width:100%;" 
 
           cellpadding="2" cellspacing="2"> 
 
          <tr> 
 
           <td>&nbsp;</td> 
 
          </tr> 
 
          <tr> 
 
           <td style="text-align:center;"><a href="signup.html"> 
 
            <button type="button" class="btn btn-main" style="width:125px;">Sign Up</button> 
 
           </a><br><br></td> 
 
          </tr> 
 
          <tr> 
 
           <td>&nbsp;</td> 
 
          </tr> 
 
          <tr> 
 
           <td> 
 
            <table style="text-align: center; width: 100%;" 
 
              cellpadding="2" cellspacing="2"> 
 
             <tr> 
 
              <td width="45%"><img src="images/2px-divider.png" 
 
                   style="width:100%; height:1px;"></td> 
 
              <td width="10%"><p class="big"">or</p></td> 
 
              <td width="45%"><img src="images/2px-divider.png" 
 
                   style="width:100%; height:1px;"></td> 
 
             </tr> 
 
            </table> 
 
           </td> 
 
          </tr> 
 
          <tr> 
 
           <td height="50px">&nbsp;</td> 
 
          </tr> 
 

 
          <tr> 
 
           <td style="text-align: center;"><a href="#"><img src="images/circles/icon-g+.png"><br>Sign 
 
            Up with Google+</a></td> 
 
          </tr> 
 
         </table> 
 

 
        </form> 
 

 
       </div> 
 

 
      </div> 
 
      <div class="col-sm-1 col-md-2 col-lg-3">&nbsp;</div> 
 

 
     </div> 
 

 

 
    </div> 
 
</div> 
 

 
<!-- Content Ends --> 
 

 

 
<footer class="container-fluid text-center"> 
 

 
    <a href="about.html">About Us</a><a href="how-do-works.html">How do! works</a><a href="contact.html">Contact 
 
    Us</a></li> 
 
    </ul> 
 

 
</footer> 
 
</body> 
 

 
</html>

+0

hi Ajay sınıflarını silmek zorunda – avi