• 中文
  • 注册
    • 查看作者
    • Bootstrap4 导航栏元素居右

      Bootstrap 4正解:
      .ml-auto元素居右
      .mr-auto元素居左

      <ul class="navbar-nav ml-auto">为右侧的导航栏项目创建另一个
      ml-auto将您navbar-nav的位置向右mr-auto拉到左边。


      Bootstrap 版本: bootstrap-4.0.0-beta.2

      通过Bootstrap4 的 Flex 布局可以很容易地将导航栏右侧对齐,只需要在包含导航栏的 <div> 加上 .justify-content-end 样式即可。

      示例:

      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
             <div class="container">
                 <a class="navbar-brand" href="/">博客</a>
                 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
                     <span class="navbar-toggler-icon"></span>
                 </button>
                 <!-- 这个 div 加上 justify-content-end 样式即可 -->
                 <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                     <ul class="navbar-nav" id="headerNav">
                         <li class="nav-item" id="navMainPage"><a class="nav-link" href="/"> 主页 </a></li>
                         <li class="nav-item" id="navTechPage"><a class="nav-link" href="/tech"> 技术 </a></li>
                         <li class="nav-item" id="navFoodPage"><a class="nav-link" href="/food"> 料理 </a></li>
                         <li class="nav-item" id="navPhotoPage"><a class="nav-link" href="/photo"> 摄影 </a></li>
                         <li class="nav-item" id="navEssayPage"><a class="nav-link" href="/essay"> 随笔 </a></li>
                     </ul>
                 </div>
             </div>
         </nav>

    • 0
    • 0
    • 0
    • 270
    • 请登录之后再进行评论

      登录
    • 做任务
    • 发表内容
    • 实时动态

    • 关于伊迪派 | 联系我们 | 免责声明 | 侵权投诉 | 小黑屋

      本站资源来源于互联网,仅供个人学习参考研究之用,请于下载后24小时内删除。
      如有侵犯您的权益,可通过邮件(admin@idepy.com)、站内通道等方式反馈,本网站将在第一时间处理。
      Copyright © 2019 - 2020 伊迪派(IDEPY), All Rights Reserved · 粤ICP备12030819号-6 · 粤公网安备 44132202100185号