为了账号安全,请及时绑定邮箱和手机立即绑定

控件超出网页范围

<!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">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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>
<form role="form" class="form-horizontal">
            <div class="form-group has-success has-feedback">
              <label class="control-label" for="inputSuccess1">成功状态</label>
              <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
              <span class="help-block">你输入的信息是正确的</span>
              <span class="glyphicon glyphicon-ok form-control-feedback"></span>
            </div>
            <div class="form-group has-warning has-feedback">
              <label class="control-label" for="inputWarning1">警告状态</label>
              <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
              <span class="help-block">请输入正确信息</span>
              <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            </div>
            <div class="form-group has-error has-feedback">
              <label class="control-label" for="inputError1">错误状态</label>
              <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
              
              <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
            </div>
          </form>   
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

http://img1.sycdn.imooc.com//562b4bf500014a0e03860369.jpg

这是为什么呢?

<div>去掉form-group就好了,为什么老师是那个不会这样?

正在回答

2 回答

我用的谷歌没有错误  可能是浏览器的差异  也学是火狐支持的不够好 


0 回复 有任何疑惑可以回复我~
#1

乐只君子 提问者

非常感谢!
2015-10-25 回复 有任何疑惑可以回复我~

容我挖个坟,因为我也遇到了,所以才想说说。个人所见。

不是浏览器的差异的问题,都会有这个问题。这是因为bootstrap网格系统的问题。

bootstrap为12网格系统。每一个列都会有15px的margin值,这样会导致第一个列的左边和最后一个列的右边会有15px的空白,看起来并不美观,所以设计者为了去掉这两边的15px的空白,于是在form-group上添加了maigin-left:-15px;margin-right:-15px;这样就导致了超出了容器。所以才出现了滚动条。

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
玩转Bootstrap(基础)
  • 参与学习       314546    人
  • 解答问题       2275    个

告诉你使用Bootstrap,并且能够独立定制出适合自己的Bootstrap

进入课程

控件超出网页范围

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信