html - Bootstrap 输入文本位于列中心

Question

我正在使用 Bootstrap，但具有非折叠导航。我试图将搜索表单放置在 col-md-6 的中心。到目前为止，我似乎已经尝试了所有方法，但没有任何效果，但它仍然在列中向左对齐。有人知道我怎样才能实现这一目标吗？

这是我的代码:

<div class="navbar navbar-default">
        <div class="container" style="margin-top:14px;">
            <div class="row">
                <div class="col-md-3">
                    <div class="navbar-header pull-left">
                    <a class="navbar-brand" href="#"><%= image_tag ("logo.png") %></a>
                    </div>
                </div>
                <div class="col-md-6">
                        <div class="navbar-header search">
                        <input type="text" id="search" class="form-control" placeholder="Search"></input>
                        </div>
                </div>
                <div class="col-md-3">
                    <div class="navbar-header pull-right">
                    <button type="button" class="btn btn-link" style="margin-top:7px;text-decoration:none;font-weight:bold;">Sign In</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

提前非常感谢!

Answer 1

您可以使用以下 CSS 规则集来做到这一点:

<div class="row">
                <div class="col-md-3">
                    <div class="navbar-header pull-left">
                    <a class="navbar-brand" href="#">&lt;%= image_tag ("logo.png") %&gt;</a>
                    </div>
                </div>
                <div class="col-md-6" style="
    text-align: center;
">
                        <div class="text-center navbar-header search" style="
    display: inline-block;
    float: none;
    margin: 0 auto;
">
                        <input type="text" id="search" class="form-control" placeholder="Search">
                        </div>
                </div>
                <div class="col-md-3">
                    <div class="navbar-header pull-right">
                    <button type="button" class="btn btn-link" style="margin-top:7px;text-decoration:none;font-weight:bold;">Sign In</button>
                    </div>
                </div>
            </div>

在中心列 div 内对齐 text-align: center; 并使用 float: none; 显示 block 。

这里是分配了 CSS 类的属性:http://plnkr.co/edit/Iu3rnVK5dLi7fiaSHBRj?p=preview