Domanda

I've searched and can't find a problem similar to mine, where it's partially responsive. I have a footer with 3 buttons and a search box. I'd like for them to be aligned and spaced evenly apart, which I've got figured out. When I reduce the screen size, the buttons are responsive and stack correctly. But the search box is aligning to the left instead of centering with the buttons. Can anyone help? I had to define a width for the search box in order to keep it cosmetically similar to the buttons. I think maybe that's the problem? Please help! Here's my fiddle: http://jsfiddle.net/kEtr9/.

    <footer>
    <div class="container">
        <div class="row navbar-inverse navbar-justified navbar-fixed-bottom row-fluid">
            <!-- replaced this with above: <div class="row"> -->
            <div class="col-sm-12 text-center"><!-- centers buttons when screen -->
                <ul class="nav navbar-nav">
                    <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i> submit bugs</button></li>
                    <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i>Feature Requests</button></li>
                    <li><button type="button" class="btn btn-sm fixed_button"><i class="icon-bolt"></i>Contact</button></li>
                    <li>                
                        <form class="navbar-form" role="search">
                            <div class="form-group">
                                <input type="text" style="width: 160px" class="form-control input-sm search-query" placeholder="Search">                       
                                <button type="submit" class="btn btn-xs" tabindex="-1">Go!</button>
                            </div>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>
È stato utile?

Soluzione

This worked for me :-)

<input type="text" style="width: 160px; margin: 0 auto; margin-bottom: 10px;" class="form-control input-sm search-query" placeholder="Search">

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top