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">
문제
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>
해결책
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">