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

使它的位置绝对，检查firebug是否从任何其他类继承float。在bootstrap中你也必须小心这些事情。

执行此操作后转到自动保证金，或通过给出百分比值

来尝试左上角位置

Answer 2

您可以使用以下一组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;显示该块。

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

Answer 3

如果您可以使用var admins = new Group { Name= "admins", }; var users = new Group { Name= "users", }; var users = new List<User> { new User { Name = "user1", Group = users }, new User { Name = "user2", Group = users }, new User { Name = "admin1", Group = admins }, new User { Name = "admin2", Group = admins }, };元素替换div父级，则无需其他样式即可：

form

JSFiddle

Bootstrap alignment classes

列中心的Bootstrap输入文本

3 个答案: