Question

我已经搜索过，找不到类似于我的问题，它的部分响应。我有一个带3个按钮和搜索框的页脚。我想让它们对齐并均匀分开，我已经弄明白了。当我减小屏幕尺寸时，按钮响应并正确堆叠。但搜索框与左侧对齐，而不是与按钮居中。有人可以帮忙吗？我必须为搜索框定义一个宽度，以使其在美观上与按钮相似。我想也许这就是问题所在？请帮忙！这是我的小提琴：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>

Answer 1

这对我有用： - ）

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

Bootstrap - 保持按钮和搜索框对齐

1 个答案: