如何让 div 在 bootstrap 导航栏中左对齐
How to have one div aligned to the left in a bootstrap navbar
我是 bootstrap 的新手,我正在尝试为 zendesk 帮助门户创建导航栏。 Zendesk 使用他们自己的称为 Handlebars 的模板语言。 Handlebars 是一个简单的模板引擎,允许您在呈现时而不是设计时在页面上插入或操作内容(如果您熟悉它,它很像 Mustache)。
虽然此导航栏中的所有元素都向右对齐,但我只希望搜索栏向左对齐 <div class="search-container">
。是否有一个 bootstrap class 可以让我在这个搜索容器的徽标旁边“向左浮动”,同时保持其他一切完好无损并像以前一样响应?
<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> ```
您必须将 <div class="search-container">
移到 <div class="navbar-nav ml-auto">
之外,因为 ml-auto
会强制导航栏元素右对齐。在此处阅读有关 navbar-nav
行为的更多信息:https://getbootstrap.com/docs/4.5/components/navbar/#supported-content
对于导航栏,似乎将此元素放在<div class="collapse navbar-collapse" id="navbarCollapse">
内就足够了。
您的代码之后应该如下所示:
<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>
我还创建了一个 running fiddle 来可视化解决方案:
显示导航栏仍然有效:
祝你好运!
我是 bootstrap 的新手,我正在尝试为 zendesk 帮助门户创建导航栏。 Zendesk 使用他们自己的称为 Handlebars 的模板语言。 Handlebars 是一个简单的模板引擎,允许您在呈现时而不是设计时在页面上插入或操作内容(如果您熟悉它,它很像 Mustache)。
虽然此导航栏中的所有元素都向右对齐,但我只希望搜索栏向左对齐 <div class="search-container">
。是否有一个 bootstrap class 可以让我在这个搜索容器的徽标旁边“向左浮动”,同时保持其他一切完好无损并像以前一样响应?
<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> ```
您必须将 <div class="search-container">
移到 <div class="navbar-nav ml-auto">
之外,因为 ml-auto
会强制导航栏元素右对齐。在此处阅读有关 navbar-nav
行为的更多信息:https://getbootstrap.com/docs/4.5/components/navbar/#supported-content
对于导航栏,似乎将此元素放在<div class="collapse navbar-collapse" id="navbarCollapse">
内就足够了。
您的代码之后应该如下所示:
<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>
我还创建了一个 running fiddle 来可视化解决方案:
显示导航栏仍然有效:
祝你好运!