CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jessie Chaisson
Jessie Chaisson

Reputation: 43

Bootstrap - input-group-btn wants to float right

So I'm building a navbar on a website with a search bar included, along with a grouped button. It works fine on a desktop view, but when I shrink down to mobile view and the site produces the collapsible menu, the search bar stays to the left, but the button floats off to the right. I do not have this issue when I remove the span with the input-group-btn class that surrounds it.

<form class="navbar-form navbar-left form-inline" role="search">
    <div class="row">
        <div class="input-group">
            <input type="text" class="form-control" style="width: 250px;"/>
            <span class='input-group-btn'>
                <button type="button" class="btn btn-default" aria-label="Search">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
            </span>
        </div>
    </div>
</form>

Picture included http://bit.ly/1G706rC

EDIT: I fixed my own issue! I just had to add a pull-left class to the span

Upvotes: 4

Views: 1378

Answers (1)

Aneesh Raman
Aneesh Raman

Reputation: 1

The issue might be something to do with the width of the text-input to be fixed in px. Try a relative measure in percentages (%) and it might work since it will resize according to the window size.

Upvotes: 0

Related Questions