Question

所以我在默认的bootstrap导航栏中添加了一个按钮

默认引导程序导航栏

                          <nav class="navbar navbar-default ">
              <div class="container-fluid ">
                <!-- Brand and toggle get grouped for better mobile display -->

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse clearfix" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">

                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                      </ul>
                    </li>
                  </ul>

                  <button class="btn btn-primary pull-left"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>


                  <form class="navbar-form navbar-left pull-right" role="search">
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                  </form>
                 <div class = "clearfix"></div>
                </div><!-- /.navbar-collapse -->
              </div><!-- /.container-fluid -->
            </nav>

添加了刷新按钮

<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>

我已经尝过这个Bootstrap 3 panel header with buttons wrong position，但它没有用。

我想要的是刷新按钮与其他组件对齐。提前致谢

Answer 1

你应该使用这样的内联类：

  <form class="navbar-form form-inline">
        <input type="text" class="search-query">
        <div class="btn-group">
            <button class="btn">1</button>
            <button class="btn">2</button>
        </div>
    </form>

更多示例：

http://getbootstrap.com/components/#navbar

Answer 2

好吧，我已经弄明白了。该按钮应放在表单内。

 <form class="navbar-form navbar-left pull-right" role="search"> <div class="box-tools "> 
                  <button class="btn btn-primary pull-left"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
                </div>
                 </form>

（c）Bootstrap: adding button group to navbar?

Bootstrap默认导航栏中添加按钮的位置不正确

2 个答案: