BigBosBil
BigBosBil

Reputation: 131

Full width input group on bootstrap 3.3.4 navbar

I've got some troubles with bootstrap v3.3.4. I need to get search bar that will fit entire width of the navbar like this (v3.0.3): http://bootply.com/109727 But it feels like there is some troubles with input group and I am getting that (v3.3.4): http://plnkr.co/edit/4UwlbwM1O0zC9jxjXOOn?p=preview Any ideas how to fix that? Or is there another way to get same result?

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container" id="navbar-container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Furni.co</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <p class="navbar-btn mr10">
                        <a tabindex="0" class="btn btn-danger" role="button" data-popover-content="#popover_sign_up" data-toggle="popover" >Sign up</a>
                    </p>
                </li>
                <li>
                    <p class="navbar-btn">
                        <a tabindex="0" class="btn btn-default" role="button" data-popover-content="#popover_log_in" data-toggle="popover" >Log in</a>
                    </p>
                </li>
            </ul>
            <form class="navbar-form">
                <div class="form-group" style="display:inline;">
                    <div class="input-group">
                        <span class="input-group-addon go">Go!</span>
                        <input type="text" class="form-control navbar-search" placeholder="Search cnc furniture">
                        <span class="input-group-addon top-bars btn-default">
                            <span class="fa fa-bars"></span>
                            <div class="arrow-container">
                                <span class="fa fa-sort-desc"></span>
                            </div>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</nav>

Upvotes: 0

Views: 1551

Answers (1)

Gulfaraz Rahman
Gulfaraz Rahman

Reputation: 407

Replace the following lines

<div class="form-group" style="display:inline;">
    <div class="input-group">

with

<div class="form-group" style="display:inline-block; width:70%">
    <div class="input-group" style="width:100%">

Here is what I got with the above change

http://plnkr.co/edit/e07Ces01ub81FKwzEqk7?p=preview

Upvotes: 1

Related Questions