Question

我正试图将搜索栏置于导航栏的中心位置。我正在使用bootstrap，我在md-4上尝试了文本中心，但它没有效果。

这是我的代码的链接。

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标签代码中，我把它放在了ork

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

期待它可以帮助你

水平居中搜索栏引导导航

2 个答案: