Bootstrap - 为什么“control-label”类不会影响标签?

时间:2016-12-15 08:55:34

标签: forms twitter-bootstrap twitter-bootstrap-3

我正在使用自举水平表格对齐,并遇到问题 在此示例中,control-label类应将标签移动到电子邮件输入字段附近,但不会发生。

问题是为什么?
提前谢谢!

您可以在JSfiddle上测试它,您可以在其中更改预览窗口大小:https://jsfiddle.net/xm5kwyqo/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container">
  <div class="row">
    <section class="col-xs-12">

<form class="form-horisontal">
<div class="form-group">
  <label for="inputName">Name</label>
  <input class="form-control" type="text"
    id="inputName" placeholder="Name">
</div>

<div class="form-group">
  <label class="col-sm-2 control-label" for="inputEmail">Email</label>
<div class="col-sm-10">
  <input class="form-control" type="email"
    id="inputEmail" placeholder="Email">  
</div>
</div>

<div class="form-group">
  <label for="selectSite">Site</label>
  <select class="form-control" id="selectSite">
    <option>Choose...</option>
    <option>lynda.com</option>
    <option>raybo.org</option>
    <option>iviewsource.com</option>
  </select>
</div>

<div class="checkbox">
  <label>
    <input id="inputAddList"
      type="checkbox">Add me to e-mail blast
  </label>
</div>

<div class="form-group">
  <label for="inputComments">Comments</label>
  <textarea class="form-control" 
    id="inputComments"></textarea>
</div>

<input type="submit" class="btn btn-default"  
  value="submit">
</form>

    </section>
  </div><!-- row -->   
</div><!-- content container -->

1 个答案:

答案 0 :(得分:1)

这是一个拼写错误的问题。水平, horiSontal

替换:

<form class="form-horisontal">

通过:

<form class="form-horizontal">

JsFiddle:https://jsfiddle.net/xm5kwyqo/1/