为何bootstrap同样的代码，同版本的依赖包，效果不一样呢？

问题描述

问 题

哥是搞后端的，对于前端没搞得很深入，有时候就是用简单的表单而已，到官网上复制一些来用：
如下：

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputEmail">Email</label>
    <div class="controls">
      <input type="text" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
      <input type="password" id="inputPassword" placeholder="Password">
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

而我用了之后呢：

相差也太远了吧？不对齐的？

都是用同版本的官网最新版依赖的css，和js啦，怎么回事呢？好乱烦，给点使用经验，好吗？

解决方案

你用的bootstrap版本和你网上找的例子不对吧。

control-group不对，应该是form-group

controls这个class不存在

另外要给input元素加上form-control这个class

要么例子里用的是bootstrap的theme，那么你要看看引入了这个theme。

官网的例子是这样的：http://getbootstrap.com/css/#...

这篇关于为何bootstrap同样的代码，同版本的依赖包，效果不一样呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！