Question

我有以下代码：

[...]
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="container">
            <div class="navbar-header">

                <a class="navbar-brand" href="#">Projeto Si</a>
                <div class="navbar-right">
                    <div class="btn-group btn-group-sm">
                        <button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-home"></span></button>
                        <button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-bell"></span></button>
                        <button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-wrench"></span></button>
                        <button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-off"></span></button>
                    </div>
                    <button type="button" class="btn btn-default btn-sm navbar-btn navbar-toogle" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="glyphicon glyphicon-chevron-down"></span>
                    </button>
                </div>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <!--<ul class="nav navbar-nav navbar-right">
                    <li>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-home"></span></button>
                            <button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-bell"></span></button>
                            <button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-wrench"></span></button>
                            <button type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-off"></span></button>
                        </div>
                    </li>
                </ul>-->
                <form class="navbar-form form-inline navbar-right" style="max-width: 400px">
                    <div class="input-group">
                        <input id="filter" class="form-control input-sm" type="text" placeholder="O que você está procurando?"/>
                        <span class="input-group-btn">
                            <button id="clearfilter" type="button" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-search"></button>
                        </span>
                    </div>
                </form>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>
[...]

http://jsfiddle.net/gjdda/1/→这是JSFiddle上的代码

如果你看，工具栏会破坏这条线。我希望工具栏与搜索框和品牌（以及<div class="navbar-header">内部）在同一行上，并且右对齐。但是如果我将工具栏放在<div class="navbar-header">换行符中，即使我使用右拉或向右导航类，工具栏也会左对齐。

Answer 1

最好的方法是使用查询将类添加到菜单〜

$( window ).resize(function() {
  if ($(window).width() <= 768) {
    $('#navbar').addClass('pull-right');
  } else {
    $('#navbar').removeClass('pull-right');
  }
});
$( document ).ready(function() {
  if ($(window).width() >= 768) {
  } else {
    $('#navbar').addClass('pull-right');
  }
});

Bootstrap导航栏标题分隔线

1 个答案: