我正在尝试使用 Bootstrap 4 创建一个符合以下示意图的网站标题:
我用来实现这一点的代码如下(省略了无关代码):
<div class="row"><div class="col text-right red"><!-- 这里的导航链接--><a href="#">link</a>
唯一的自定义 CSS 是更改背景颜色以匹配原理图的颜色.
这会产生以下呈现的 HTML 页面，其中行不跨越容器:
然而，在 Bootstrap 3 中这不是问题.只有将框架更改为 Bootstrap 3 才能提供正确的布局:
此外，如果容器(及其嵌套内容)从其导航栏父项中删除，则可以在 Bootstrap 4 中实现正确的布局:
我需要在 Bootstrap 4 中做什么才能在仍然使用导航栏类的同时实现所需的布局?
Bootstrap 4 网格 row>col-* 不是为了在导航栏中使用而设计的.这是支持的内容.现在 Bootstrap 4 使用了 flexbox，在不使用网格 row 的情况下对齐导航栏内容要容易得多>col-*.
如果您想要一个带有徽标和 2 行的 导航栏，请参阅此答案:
带有 2 行的 Bootstrap 4 导航栏
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark"><div class="容器"><h1 class="mb-0"><a href="#">标志</a></h1><div class="d-flex flex-column flex-wrap" id="navbarCollapse"><span class="navbar-text ml-auto py-0 px-lg-2">(00) 1234 5678</span><ul class="navbar-nav mb-auto mt-0 ml-auto"><li class="nav-item active"><a class="nav-link py-0" href="#">首页</a><li class="nav-item"><a class="nav-link py-0" href="#">Product</a><li class="nav-item"><a class="nav-link py-0" href="#">公司</a><li class="nav-item"><a class="nav-link py-0" href="#">博客</a></nav>
示例:
2 行基本导航栏:https://www.codeply.com/go/ilJBKjJsEy
具有 2 行的响应式导航栏:https://www.codeply.com/go/DsfePuoZy0
第二个示例在小屏幕上折叠为移动堆叠菜单，可以使用汉堡包图标进行切换.使用 flexbox 和间距实用程序类根据需要定位元素.有许多方法可以实现您的目标:https://www.codeply.com/go/pGE8fTf9dM
I am trying to create a website header that conforms to the schematic below using Bootstrap 4:
The code I am using to achieve this is as follows (extraneous code omitted):
<div class="navbar">
<div class="container yellow">
<div class="row">
<div class="col-sm-4 green">Logo</div>
<div class="col-sm-8 green">
<div class="row">
<div class="col text-right red">
(00) 1234 5678
</div>
</div>
<div class="row">
<div class="col text-right red">
<!-- nav links here -->
<a href="#">link</a>
</div>
</div>
</div>
</div>
</div>
</div>
The only custom CSS is to change the background colours to match those of the schematic.
This results in the following rendered HTML page, where the row does not span the container:
However, in Bootstrap 3 this is not an issue. Only changing the framework to Bootstrap 3 gives the correct layout:
Also, the correct layout can be achieved within Bootstrap 4 if the container (and its nested content) is removed from its navbar parent:
What do I need to do within Bootstrap 4 to achieve this desired layout whilst still using the navbar class?
The Bootstrap 4 grid row>col-* aren't designed to be used inside the Navbar. Here is the supported content. Now that Bootstrap 4 uses flexbox, it's much easier to align Navbar content without using the grid row>col-*.
If you want a Navbar with logo and 2 rows, see this answer:
Bootstrap 4 navbar with 2 rows
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<div class="container">
<h1 class="mb-0"><a href="#">Logo</a></h1>
<div class="d-flex flex-column flex-wrap" id="navbarCollapse">
<span class="navbar-text ml-auto py-0 px-lg-2">(00) 1234 5678</span>
<ul class="navbar-nav mb-auto mt-0 ml-auto">
<li class="nav-item active">
<a class="nav-link py-0" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="#">Company</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="#">Blog</a>
</li>
</ul>
</div>
</div>
</nav>
Examples:
Basic Navbar with 2 rows: https://www.codeply.com/go/ilJBKjJsEy
Responsive Navbar with 2 rows: https://www.codeply.com/go/DsfePuoZy0
The 2nd example collapses into a mobile stacked menu on small screens that can be toggled using the hamburger icon. Use the flexbox and spacing utility classes to position elements as desired. There are many ways to achieve what you want: https://www.codeply.com/go/pGE8fTf9dM
这篇关于Bootstrap 4:带有徽标和 2 行的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
