水平居中搜索栏引导导航

Question

我正在尝试将搜索栏放在导航栏的中央。我正在使用bootstrap，我在md-4上尝试了text-center，但是没有效果。

下面是我的代码的链接。

http://bootsnipp.com/snippets/50b38

Answer 1

Bootstrap使用12列的网格。你的代码第一列是8，第二列是4，这意味着你的第一列将是页面的2/3。通过将其设置为col-md-4，它允许您的中间div居中。

  <div class="row top-header">
    <div class="container">
      <div class="col-md-4">
        <img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=320%C3%97240&w=235&h=126" alt="logo image" />
      </div>
      <div class="col-md-4">
            <div id="search-center">
                <div class="input-group">
                    <input type="text" class="form-control input-lg" placeholder="Search" />
                    <span class="input-group-btn">
                        <button class="btn btn-info btn-lg" type="button">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </span>
                </div>
            </div>
      </div>
    </div>
  </div>

这是一个更新的来源：http://bootsnipp.com/user/snippets/E7WgX

Answer 2

在你的css标签中的代码上，我把它放在上面，看起来很棒。

.top-header {
    background-color: #D9D9D9;
    text-align:center;
}

希望它能帮到你