Databases
StackOverflow2013
Postsdbo
POBootstrap form horizontal: align two inputs next to each other
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap form horizontal: align two inputs next to each other
    text
    copied!<p>I am trying to figure out how to align two inputs (like zip and city) parallel side by side in Bootstrap using <code>form-horizontal</code>. I tried using the <code>div.row</code> wrapper with <code>spanX</code> classes combined with <code>input-block-level</code>.</p> <p>Alternatively, I attempted to leave out the <code>div.row</code> but giving the inputs the <code>spanX</code> classes directly.</p> <p>The problem is, that the width of the inputs differs. Maybe this is a bug, but at a certain viewport (requires <code>bootstrap-responsive.css</code>) it works properly — but not with a large viewport and sometimes horizontal scrollbars appear.</p> <p>Shouldn't rhe responsive stylesheet of Bootstrap adapt the sizes? Wrapping the whole code in a <code>div.container</code> makes it even worse.</p> <p>Maybe you can even show me some complete different solutions?</p> <p>I prepared a <a href="http://jsfiddle.net/aKnzS/" rel="nofollow noreferrer">jsFiddle</a> and some screenshots for you. You can find the size of the window and the size of the viewport (in square brackets) in the title. Click the images for full size.</p> <p><a href="https://i.stack.imgur.com/cxcsy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cxcsym.png" alt=""></a> <a href="https://i.stack.imgur.com/pjbx2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pjbx2m.png" alt=""></a> <a href="https://i.stack.imgur.com/Vufct.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vufctm.png" alt=""></a> <a href="https://i.stack.imgur.com/oVpNo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oVpNom.png" alt=""></a> <a href="https://i.stack.imgur.com/5cVMv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5cVMvm.png" alt=""></a> <a href="https://i.stack.imgur.com/pMNCN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pMNCNm.png" alt=""></a> <a href="https://i.stack.imgur.com/d5ATG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d5ATGm.png" alt=""></a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload