水平居中搜索栏引导导航

Question

>我正在尝试将搜索栏居中在我的导航栏中。我正在使用引导程序，我在 md-4 上尝试了文本中心，但没有效果。

这是我的代码的链接。

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;
}

期待它对你有所帮助