项目

项目

关注
发信
NetworkOnMainThreadException 的快速修复
Bitmap.Save保存图标实际保存为.png
视觉工作室2013“添加控制器”缺失
如何在 logcat 中显示长消息
SAS Azure签名不匹配
如何解决此错误:“找不到类 PHPUnit_Extensions_SeleniumTestCase"
Kakadu没有在Ubuntu linux 12.04lts上运行
无法在 kotlin 和 JpaRepository 中为嵌套列表对象找到适当的构造函数错误
HTML/Java Script Canvas - 如何在源点和目标点之间绘制图像?
如何告诉JSON模式验证器从属性值中选择模式？
$.load 中的表单未正确发布
如何获得总覆盖面积，同时绘制在画布上的android路径？
你如何处理关系数据库中的 m..n 关系?
Excel：按月计算出现次数
如何从CatPlot中删除空条

带有左对齐、居中或右对齐项目的 Bootstrap NavBar

扫码查看
本文介绍了带有左对齐、居中或右对齐项目的 Bootstrap NavBar的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在Bootstrap中，创建左侧有徽标A、中间有菜单项、右侧有徽标B 的导航栏的最平台友好方式是什么?

这是我到目前为止所尝试的，它最终对齐，以便徽标 A 在左侧，徽标旁边的菜单项在左侧，徽标 B 在右侧.

<div class="navbar navbar-fixed-top navbar-custom "><div class="container" ><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>

<div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#about">菜单项 1</a></li><li><a href="#contact">菜单项 2</a></li><li><a href="#about">菜单项 3</a></li><ul class="nav navbar-nav navbar-right"><li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>

解决方案

2021 更新

引导程序 5(测试版)

Bootstrap 5 也有一个 flexbox 导航栏，并引入了新的 RTL 支持.出于这个原因，左"的概念出现了.和正确的"已被替换为开始"和结束".因此，Bootstrap 5 测试版的保证金实用程序发生了变化:

还要注意 data-toggle 和 data-target 也发生了变化:

<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link";href=#">左</a><li class="nav-item"><a class="nav-link";href="//codeply.com">Codeply</a><li class="nav-item"><a class="nav-link";href=#">链接</a><li class="nav-item"><a class="nav-link";href=#">链接</a><li class="nav-item"><a class="nav-link";href=#">链接</a>

<div class="mx-auto order-0"><a class="navbar-brand mx-auto";href=#">Navbar 2</a><button class="navbar-toggler";类型=按钮"数据切换=折叠"数据目标=.dual-collapse2"><span class="navbar-toggler-icon"></span>

<div class="navbar-collapse collapse w-100 order-3 dual-collapse2"><ul class="navbar-nav ml-auto"><li class="nav-item"><a class="nav-link";href=#">右</a><li class="nav-item"><a class="nav-link";href=#">链接</a>

</nav>

<div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0"><ul class="navbar-nav ml-auto text-center"><li class="nav-item active"><a class="nav-link";href=#">链接</a>
<div class="mx-auto my-2 order-0 order-md-1 position-relative"><a class="mx-auto";href=#"><img src="//placehold.it/120/ccff00";class=圆形"></a><button class="navbar-toggler";类型=按钮"数据切换=折叠"数据目标=.dual-collapse2"><span class="navbar-toggler-icon"></span>
<div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2"><ul class="navbar-nav mr-auto text-center"><li class="nav-item"><a class="nav-link";href=#">链接</a>
</nav>

或，这些其他 Bootstrap 4 对齐方案:

更多 Bootstrap 4 示例:

<div class="navbar-header">
<a class="navbar-brand";href=#">品牌</a><div class="navbar-collapse collapse"><ul class="nav navbar-nav navbar-left"><li><a href=#">左</a></li><li><a href=#about">Left</a></li><ul class="nav navbar-nav navbar-right"><li><a href=#about">右</a></li><li><a href=#contact">右</a></li>
</nav>.navbar-品牌{位置:绝对；宽度:100%；左:0；文本对齐:居中；保证金:0 自动；}.navbar-toggle {z-索引:3；}
<div class="navbar-header">
<div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href=#">左</a></li><ul class="nav navbar-nav navbar-center"><li><a href=#">中心</a></li><li><a href=#">中心</a></li><li><a href=#">中心</a></li><ul class="nav navbar-nav navbar-right"><li><a href=#">右</a></li>
</nav>@media(最小宽度:768px){.navbar-nav.navbar-center {位置:绝对；左:50%；变换:translatex(-50%);}}
.navbar .navbar-header,.navbar-collapse {浮动:无；显示:内联块；垂直对齐:顶部；}@media(最大宽度:768px){.navbar-collapse {显示:块；}}

http://codeply.com/go/1lrdvNH9GI

更多示例:

左品牌，中心链接
左拨动开关，中心品牌

对于 3.x，另见导航对齐:引导中心导航栏>

Bootstrap 中的中心导航栏
Bootstrap 4 将导航栏项目向右对齐

In Bootstrap, what is the most platform-friendly way to create a navigation bar that has Logo A on the left, menu items in the center, and Logo B on the right?

Here is what I've tried so far, and it ends up being aligned so that Logo A is on the left, menu items next to the logo on the left and Logo B on the right.

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>
解决方案

2021 Update

Bootstrap 5 (beta)

Bootstrap 5 also has a flexbox Navbar, and introduces new RTL support. For this reason the concept of "left" and "right" has been replaced with "start" and "end". Therefore the margin utilities changed for Bootstrap 5 beta:

Also note that data-toggle and data-target have changed too:

Navbar Demo for Bootstrap 5

Bootstrap 4

Now that Bootstrap 4 has flexbox, Navbar alignment is much easier. Here are updated examples for left, right and center in the Bootstrap 4 Navbar, and many other alignment scenarios demonstrated here.

The flexbox, auto-margins, and ordering utility classes can be used to align Navbar content as needed. There are many things to consider including the order and alignment of Navbar items (brand, links, toggler) on both large screens and the mobile/collapsed views. Don't use the grid classes (row,col) for the Navbar.

Here are various examples...

Left, center(brand) and right links:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

http://codeply.com/go/qhaBrcWp3v


Another BS4 Navbar option with center links and overlay logo image:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">
            <img src="//placehold.it/120/ccff00" class="rounded-circle">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Or, these other Bootstrap 4 alignment scenarios:

brand left, dead center links, (empty right)

brand and links center, icons left and right

More Bootstrap 4 examples:

toggler left on mobile, brand right
center brand and links on mobile
right align links on desktop, center links on mobile
left links & toggler, center brand, search right

Also see: Bootstrap 4 align navbar items to the right
Bootstrap 4 navbar right align with button that doesn't collapse on mobile
Center an element in Bootstrap 4 Navbar

Bootstrap 3

Option 1 - Brand center, with left/right nav links:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

http://bootply.com/98314 (3.x)

Option 2 - Left, center and right nav links:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-center">
        <li><a href="#">Center</a></li>
        <li><a href="#">Center</a></li>
      <li><a href="#">Center</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right</a></li>
    </ul>
  </div>
</nav>

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

http://bootply.com/SGYC6BWeBK

Option 3 - Center both brand and links

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://codeply.com/go/1lrdvNH9GI

More examples:

Left brand, center links
Left toggler, center brand

For 3.x also see nav-justified: Bootstrap center navbar

Center Navbar in Bootstrap
Bootstrap 4 align navbar items to the right

这篇关于带有左对齐、居中或右对齐项目的 Bootstrap NavBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-04 03:40
查看更多
Powered by LMLPHP ©2025 项目 0.040595