Question

我正在使用bootstrap，我是新手。我做了这个页面，但为什么我的单选按钮在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">&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>

Answer 1

从标签中删除此范围并直接在其中写入文本

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

Answer 2

将网格列类设置为<label>级别，而不是嵌套<span>标记：

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

Answer 3

请参阅下面给出的编辑代码。我认为这是解决方案。只需要在LABEL中删除SPAN，否则删除该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>

单选按钮未正确对齐

3 个答案: