StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I thought of a minimal way to fix this without modifying the default structure of the navbar form used in the Bootstrap documentation.</p> <p>Add class <code>navbar-input-group</code> to the form</p> <pre><code><form class="navbar-form navbar-left navbar-input-group" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search for awesome stuff"> </div> <button type="submit" class="btn btn-default">Search</button> </form> </code></pre> <p>CSS (place in media query if necessary):</p> <pre><code>.navbar-input-group { font-size: 0px; /*removes whitespace between button and input*/ } .navbar-input-group input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .navbar-input-group .btn { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 0px; } </code></pre> <p>or SCSS (keeps responsiveness intact):</p> <pre><code>@import "bootstrap-variables"; .navbar-input-group { @media (min-width: $screen-sm) { font-size: 0px; /*removes whitespace between button and input*/ input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .btn { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-left: 0px; } } @media (max-width: $screen-xs-max) { margin-top:0px; margin-bottom:0px; .btn { width:100%; } } } </code></pre> <p>Result:</p> <p><img src="https://i.stack.imgur.com/dNvlx.jpg" alt="enter image description here"></p> <p><em>For purposes of clarity, I am targeting descendant elements in the CSS. This is not the most efficient way to target CSS elements. If you like this answer, consider giving the input and button unique class names and targeting them without any descendant selectors in your CSS (read: <a href="http://csswizardry.com/2011/09/writing-efficient-css-selectors/" rel="nofollow noreferrer">http://csswizardry.com/2011/09/writing-efficient-css-selectors/</a>)</em></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