Bootstrap 4 如何在引导导航栏中将一个div向左对齐

我是bootstrap新手，我正在尝试为zendesk帮助门户创建一个导航栏。Zendesk使用自己的模板语言称为Handlebar。Handlebars是一个简单的模板引擎，允许您在渲染时而不是在设计时插入或操作页面上的内容（如果您熟悉它的话，很像Moustach）。 虽然此导航栏中的所有元素都向右对齐，但我只希望搜索栏向左对齐

。是否有一个引导类可以让我在这个搜索容器的logo旁边“向左浮动”，同时保持其他所有内容的完整性和响应性

    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="logo">
            {{#link 'help_center'}}
            <img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
            {{/link}}
        </div>

        <button type="button" class="navbar-toggler second-button" data-toggle="collapse" data-target="#navbarCollapse"
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <div class="animated-icon2"><span></span><span></span><span></span><span></span></div>
        </button>



        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav ml-auto">
                <div class="search-container">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12"
                        class="search-icon">
                        <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor" />
                        <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5" />
                    </svg>
                    {{search scoped=settings.scoped_kb_search submit=false}}
                </div>


                <a href="https://" class="nav-item nav-link">Help Portal</a>
                {{#if alternative_locales}}
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">{{current_locale.name}}</a>
                    <div class="dropdown-menu">
                        {{#each alternative_locales}}
                        <a href="{{url}}" class="dropdown-item" dir="{{direction}}" rel="nofollow"
                            role="menuitem">{{name}}</a>{{/each}}
                    </div>
                </div>{{/if}}
                {{#if signed_in}}
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {{user_avatar class="user-avatar"}}
                        {{user_name}}
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a href="#" class="dropdown-item">{{link "my_activities" role="menuitem"}}</a>
                        <a href="#" class="dropdown-item">{{my_profile role="menuitem"}}</a>
                        <a href="#" class="dropdown-item password-item">{{change_password role="menuitem"}}</a>
                        <a href="#" class="dropdown-item">{{link "sign_out" role="menuitem"}}</a>
                    </div>
                </div>

                {{else}}
                <div class="sign-in-div">
                    {{#link "sign_in" class="sign-in"}}
                    {{t 'sign_in'}}
                    {{/link}}
                </div>
                {{/if}}


            </div>

        </div>


    </nav>


</div> ```

 

 

{{{链接“帮助中心”}
{{/link}
{{search scoped=settings.scoped_kb_search submit=false}
{{{if alternative_locales}
{{{#每个备选地点}
{{/每个}}
{{/if}
{{{如果在}中签名}
{{user_avatar class=“user avatar”}
{{user_name}}
{{else}
{{{#link“sign_in”class=“sign in”}
{{t'符号}
{{/link}
{{/if}
```

您必须将

移动到

之外，因为

ml auto

将强制导航栏元素在右侧对齐。请在此处阅读有关导航栏导航行为的更多信息：

对于导航栏，将此元素放置在

中似乎就足够了

之后，您的代码应该如下所示：

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="logo">
        {{#link 'help_center'}}
        <img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
        {{/link}}
    </div>

    <button type="button" class="navbar-toggler second-button" data-toggle="collapse" data-target="#navbarCollapse"
        aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <div class="animated-icon2"><span></span><span></span><span></span><span></span></div>
    </button>



    <div class="collapse navbar-collapse" id="navbarCollapse">
        <div class="search-container">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12"
                    class="search-icon">
                <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor" />
                <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5" />
            </svg>
            {{search scoped=settings.scoped_kb_search submit=false}}
        </div>
        <div class="navbar-nav ml-auto">

            <a href="https://" class="nav-item nav-link">Help Portal</a>
            {{#if alternative_locales}}
            <div class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">{{current_locale.name}}</a>
                <div class="dropdown-menu">
                    {{#each alternative_locales}}
                    <a href="{{url}}" class="dropdown-item" dir="{{direction}}" rel="nofollow"
                        role="menuitem">{{name}}</a>{{/each}}
                </div>
            </div>{{/if}}
            {{#if signed_in}}
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    {{user_avatar class="user-avatar"}}
                    {{user_name}}
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a href="#" class="dropdown-item">{{link "my_activities" role="menuitem"}}</a>
                    <a href="#" class="dropdown-item">{{my_profile role="menuitem"}}</a>
                    <a href="#" class="dropdown-item password-item">{{change_password role="menuitem"}}</a>
                    <a href="#" class="dropdown-item">{{link "sign_out" role="menuitem"}}</a>
                </div>
            </div>

            {{else}}
            <div class="sign-in-div">
                {{#link "sign_in" class="sign-in"}}
                {{t 'sign_in'}}
                {{/link}}
            </div>
            {{/if}}


        </div>

    </div>


</nav>

{{{链接“帮助中心”}
{{/link}
{{search scoped=settings.scoped_kb_search submit=false}
{{{if alternative_locales}
{{{#每个备选地点}
{{/每个}}
{{/if}
{{{如果在}中签名}
{{user_avatar class=“user avatar”}
{{user_name}}
{{else}
{{{#link“sign_in”class=“sign in”}
{{t'符号}
{{/link}
{{/if}

我还创建了一个可视化的解决方案：

显示导航栏仍然工作：

祝你好运