0
我正在使用引導程序，我對它很陌生。我做了這個頁面，但爲什麼我的單選按鈕在iPhone4等小設備中沒有正確對齊。請告訴我相同的原因，並提前致謝。單選按鈕未正確對齊
<!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"> </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"> </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"> </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"> </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> </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> </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"> </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"> </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>
喜阿賈伊的班，謝謝你的解決方案，但它不工作現在還 – avi