Home >Web Front-end >HTML Tutorial >Bootstrap3表单checkbox不能水平对齐问题_html/css_WEB-ITnose
Bootstrap3表单checkbox不能水平对齐问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:59:111554browse
小弟最近使用bootstrap做一个注册页面的时候，要使用到checkbox，在单独的HTML页面中是没问题的，但是套在表单中就不能水平对齐了，求大神们支招啊。下面贴上代码和图片
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <style type="text/css"> body { background-color: #F2F2F3; } a { text-decoration: none; } .row-box { margin-top: 100px; } .reg-box { background-color: white; border: 1px solid #999999; border-radius: 3px; } .form-head { /*min-width: 240px;*/ } .form-head .a-logo { display: block; margin: 50px 0px 40px 0px; } .form-head .a-logo img { margin: 0 auto; max-width: 120px; border-radius: 5px; } .form-head h1 { font-family: "微软雅黑"; font-size: 20px; color: #666666; } .form-body { width: 50%; margin: 0 auto; padding: 30px 30px 50px 30px; } .form-body input { height: 40px; /*min-width: 175px;*/ } .form-ul {} .form-ul li { margin-bottom: 20px; } .yzm { /*float: left;*/ padding: 0; } .yzm-tu { /*float: right;*/ padding: 0; } </style> <title>register</title> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row row-box"> <div class="col-sm-8 col-sm-offset-2 reg-box"> <div class="form-head"> <a href="javascript:void(0)" class="a-logo"><img src="img/logo.jpg" class="img-responsive" alt="" /></a> <h1 class="text-center">注册新用户</h1> </div> <div class="form-body"> <form action="" method="post"> <ul class="form-ul list-unstyled"> <li> <input type="text" class="form-control" name="username" placeholder="用户名" id="" /> </li> <li> <input type="email" class="form-control" name="usermail" placeholder="邮箱" id="" /> </li> <li> <input type="password" class="form-control" name="userpwd" placeholder="密码" id="" /> </li> <li> <div class="col-sm-7 yzm"> <input type="text" class="form-control" name="" id="" placeholder="验证码" /> </div> <div class="col-sm-4 col-sm-offset-1 yzm-tu"> <img src="img/captcha.png" class="img-responsive" / alt="Bootstrap3表单checkbox不能水平对齐问题_html/css_WEB-ITnose" > </div> </li> <li> <!-- 就是这里出问题了--> <div class="checkbox"> <label class="checkbox-inline"> <input type="checkbox">我同意 </label> </div> <!--<a href="javascript:void(0)" style="max-width:90%">已有账号</a>--> </li> <li> <button type="button" class="btn btn-primary btn-block">注册</button> </li> </ul> </form> </div> </div> </div> </div> </body></html><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script>
回复讨论(解决方案)
这个的问题
.form-body input {
height: 40px;
/*min-width: 175px;*/
}
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Fab 和 Dialog 之间的过渡效果（Fab and Dialog Morphing Animation）_html/css_WEB-ITnoseNext article：让ICON生动起来 纯CSS实现带动画的天气图标_html/css_WEB-ITnose