Bootstrap文本输入错误的高度 [英] Bootstrap text input wrong height

查看:102
本文介绍了Bootstrap文本输入错误的高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我遇到了bootstrap输入文本高度大小的问题。我使用标准的bootstrap.css样式表,搜索表位于导航栏内:

I am having an issue with bootstrap input text height size. I am using the standard bootstrap.css stylesheet and the searchform resides inside a navbar:

<div class="navbar  navbar-fixed-top m-header">
    <div class="navbar-inner m-inner">
        <div class="container-fluid">
            <div class="row-fluid">
                ...

<!-- // START SEARCH BAR -->
<div class="span6 offset4">             
    <form>
      <div class="input-append" id="top-search">
        <input type="text" placeholder="Search...">
        <div class="btn-group">
            <button class="btn" tabindex="-1">Search</button>
            <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
              <i class="icon-search"></i>aaa
            </label></li>
            <li class="divider"></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option2" checked>
              <i class="icon-th"></i>bbb
            </label></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option3" checked>
             <i class="icon-file"></i>ccc
            </label></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option4" checked>
              <i class="icon-inbox"></i>ddd
            </label></li>
            <li><label class="radio">
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option5" checked>
              <i class="icon-camera"></i>eee
            </label></li>
            </ul>
        </div>
      </div>
    </form>
</div>
<!-- // END SEARCH BAR -->
...

Firefox:

Chrome:

我做了一些研究,可能是因为我使用了错误的doctype,但我遵循了bootstrap指南,并且已经设置了HTML5 doctype:

I did some research and it could be that I was using the wrong doctype but I followed the bootstrap guide and had already set the HTML5 doctype:

<!DOCTYPE HTML>
<html lang="en">
  <head>

我还通过使用linux'file'和'more'来检查我的文件中是否有垃圾字符但事实并非如此。

I also checked if there was garbage characters inside my files by using linux 'file' and 'more' but this is not the case.

如果我在检查元素工具中覆盖或关闭文本输入的高度,则高度显示正确。如上所述: https://github.com/twitter/bootstrap/issues/ 246 #issicecomment-7295682
仍然将插入符号按钮大小显示为小..

If I overwrite or turn off the height of the text input in inspect element tool the height is showing correct. As mention here: https://github.com/twitter/bootstrap/issues/246#issuecomment-7295682 Still the caret button size will show small..

但是,我不明白为什么文本输入是在bootstraps自己的网站上显示正确:
http://twitter.github .com / bootstrap / base-css.html#forms
为什么他们没有相同的问题?

However, I don't understand why the text input is showing correct on bootstraps own website: http://twitter.github.com/bootstrap/base-css.html#forms Why don't they have the same issue?

推荐答案

是的,我可以通过查看实际的源代码来确认是否在HTML之前输出了代码,因此未设置HTML doctype。将其移动到正在调用的第一个文件的第一行,它现在可以正常工作。 Doh!

Yes, I can confirm by viewing the actual source code there was code being outputted before the HTML and therefore the HTML doctype wasn't set. Moved it to the first line of the first file that is being called and it works now. Doh!

这篇关于Bootstrap文本输入错误的高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆