Question

导航栏中元素的初始（桌面）位置：搜索表单（左侧）和用于显示日期的导航栏品牌（右侧）

崩溃后我得到了这个：

问题：

日期应与折叠按钮位于同一行
日期前不应有额外空格
折叠按钮行下只有1个分隔边框

相反，我希望得到这个：

可行吗？

代码是：

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <span class="navbar-brand navbar-right">
                {{vm.currentDate.date}}
                <span style="color: tomato">{{vm.currentDate.time}}</span>
            </span>
            <form class="navbar-form navbar-left" role="search" method="get" target="_blank" action="https://www.google.com/search?">
                <div class="form-group">
                    <input type="text" name="q" ng-model="vm.selected" uib-typeahead="suggestion for suggestion in vm.getSuggestions($viewValue)"
                        size="40" class="form-control gsfi" placeholder="Search..." autocomplete="off" x-webkit-speech autofocus>
                </div>
                <button class="btn btn-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

Answer 1

您需要将日期移到导航栏折叠之外。我可能会把它放在按钮元素上面。

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <span class="navbar-brand navbar-right">
                {{vm.currentDate.date}}
                <span style="color: tomato">{{vm.currentDate.time}}</span>
            </span>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <form class="navbar-form navbar-left" role="search" method="get" target="_blank" action="https://www.google.com/search?">
                <div class="form-group">
                    <input type="text" name="q" ng-model="vm.selected" uib-typeahead="suggestion for suggestion in vm.getSuggestions($viewValue)"
                        size="40" class="form-control gsfi" placeholder="Search..." autocomplete="off" x-webkit-speech autofocus>
                </div>
                <button class="btn btn-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

Bootstrap导航栏 - 如何修复此布局？

1 个答案: