Geek Answers Handbook

Bootstrap input window height reduced

I use botstrap boxing on my site, however the line height seems to have decreased, and I can’t understand for life why.

I have not modified any boot CSS, only my own, but I do not think this interferes.

The code I use is:

<div class="pull-left"> <h3>Search for devices</h3> <p>Use the search form below to search for your device.</p> <div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Search</button> </div> </div>

Here's a live example: http://dev.romwars.com/#

Anyone have any suggestions?

+4
source share
2 answers

The browser is in quirks mode because you did not specify the document type of the page.

+3
source

My browser (Chrome) applies the box-sizing: border-box rule on your input. To fix your problem, you should add the following to your CSS:

 input[type="text"] { box-sizing: content-box; }

It also seems that your problem is what she described in this question: What makes the "user agent stylesheet" use "border-box" instead of "content-box" for box sizing? . You may decide that placing <!DOCTYPE html> above your document.

+3
source

More articles:


All Articles