表格组内的Bootstrap 3输入宽度和标签大小

时间:2016-03-27 15:01:33

标签: css twitter-bootstrap twitter-bootstrap-3

您好我正在使用Bootstrap 3,当我遇到调整用户输入的问题时,我从这个question shadowf的帮助中得到了帮助。

现在我陷入了另一个问题。修复程序确实调整了输入的大小,但是对于标签和窗体组内的控件应用相同的内容,因为该类在该级别应用。

我需要为标签和输入框应用不同的大小。如果我在标签或输入级别应用大小调整类,则表单对齐可以进行折腾。

我不想使用水平或内联形式。

 stay= false
  $(element).hover(function(){
      console.log('mouseover');
      $(box).show();
      $(box).hover(function(){
         stay=true;
       }, 
       function(){
           exitHover();
           console.log('mouseout if box');
        });
  },
  function(){
     exitHover();
     console.log('mouseout');
  });
  function exitHover(){
      if(stay) return;
      //hide box
  }

修改过的小提琴here

1 个答案:

答案 0 :(得分:2)

好像你需要在文本标签和输入框之间分开线条。然后,您可以使文本跟随整个12网格系统,而输入仅使用系统中的6个块:

<div class="form-group">
  <div class="row">
    <div class="col-xs-12">
      <label for="exampleInputEmail1">Really long label which I want to have separate sizing</label>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
  </div>
</div>

JSFiddle。我没有对密码字段做任何事情,但你明白了。祝你好运!