发表新帖
发表新帖

Text input rendering issue with Twitter Bootstrap

后端 未结
关注
8 1476
天命终不由人
天命终不由人 2020-12-15 04:18

I\'m trying to use Twitter\'s bootstrap for a quick few pages. I\'m having problems getting text fields to render like they do at http://twitter.github.com/bootstrap/

相关标签:
8条回答
  • 遥遥无期
    2020-12-15 04:48

    This behavior is also triggered when the doctype is wrongly typed. In my case, <!DOCTYPE> (wrong) was fixed to <!DOCTYPE HTML> and the problem went away.

    0 讨论(0)
  • 予麋鹿
    2020-12-15 04:48

    Thanks to all, that help me.
    I also face this problem, to help the other user I share my journey how I solve it. The problem look like this : enter image description here

    This problem comes in Firefox its look proper in chrome.

    How I found solution:

    • I know you are think that this is the problem with css optimize. Or there is not proper CSS behind it.
    • I'm using bootstrap then second thought comes in mind is that there is not proper class place to input box.
    • When I come to this question and started reading of answer they suggested that the problem with <!DOCTYPE html> I don't believe, but I started look that page.
    • I also check with View Source in Firefox but there is present that <!DOCTYPE html>
    • Suddenly I look at the firebug html and there is really no DOCTYPE here comes while in all other pages it is coming.

    Now I think why this happened, reason behind it.
    Then I look at the jsp pages. This is the problem in my case, someone include the other jsp page before the body.

    Hope this highlight help.

    0 讨论(0)
  • 梦谈多话
    2020-12-15 04:49

    replace class="x-large" to : class="input-block-level"

    0 讨论(0)
  • 心在旅途
    2020-12-15 05:00

    I had the same problem, but in my case it was caused by having an inconsistent text encoding across files. Some files were encoded in UTF-8 without BOM (byte order mark), while other files were encoded in UTF-8 with BOM included. I switched all files to UTF-8 without BOM and it worked correctly.

    0 讨论(0)
  • 南笙
    2020-12-15 05:00

    My file has been created within Windows and I had a similar problem, i.e. the height was too small so descenders were truncated. My file has some PHP as the first lines followed by the required html. After reading all the comments, I moved my (2 lines) to the top ahead of the PHP and the height increased ... so problem resolved. It appears that DOCTYPE must be at the start even before any PHP.

    0 讨论(0)
  • 南笙
    2020-12-15 05:07

    In my case:
    - I had the input text in a form
    - It did work in Firefox and did not work in Chrome

    I fixed this by overriding the line-height in the bootstrap css. First it was like this:

    line-height: inherit;

    and when I changed it in my css(so it overrides the bootstrap css):

    line-height: normal;

    It worked!

    For people who see this and don't know what I'm talking about, press f12 and go to your textbox.
    Now in the styles tab u will see:

    input, button, select, textarea {
   font-family: inherit;
   font-size: inherit;
   font-height: inherit;
}

    that is the one that you want to override.

    0 讨论(0)
 看不清?
提交回复
热议问题