Codeigniter 导航栏调整/对齐问题答案

【问题标题】：Codeigniter Navbar Adjustment/Alignment ProblemCodeigniter 导航栏调整/对齐问题
【发布时间】：2019-06-24 14:53:08
【问题描述】：

我想将导航栏组件/按钮向右移动一点。但是怎么做？请多谢！以下是我来自 Youtube 中一个频道的代码。太感谢了！

<body>
<nav class="navbar navbar-inverse" id="header">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="<?php echo base_url(); ?>home"><font size="+1.5"><span style="color:#111111;">CAMCS</span></font></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="#"><a href="<?php echo base_url(); ?>home"><span style="color:#111111;">HOME</span></a></li>
        

        <li class="#"><a href="<?php echo base_url(); ?>home"><span style="color:#111111;">ABOUT CAMCS</span></a></li>


        <li class="#"><a href="<?php echo base_url(); ?>home"><span style="color:#111111;">OFFICE OF THE PRINCIPAL</span></a></li>
        <li class="#"><a href="<?php echo base_url(); ?>home"><span style="color:#111111;">ACADEMICS</span></a></li>
        <li class="#"><a href="<?php echo base_url(); ?>home"><span style="color:#111111;">ADMISSION</span></a></li>
        <li class="#"><a href="<?php echo base_url(); ?>home"><span style="color:#111111;">STUDENT BODY</span></a></li>

      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="<?php echo base_url(); ?>users/registration"><span class="glyphicon glyphicon-user", style="color:#111111;"></span> <span style="color:#111111;">CONTACT US</span></a></li>
      </ul>
    </div>
  </div>
</nav>

HERE IS THE SCREEN SHOT OF MY NAVBAR. PLEASE HELP!

请参考截图

【问题讨论】：

您使用的是 Bootstrap 4 吗？您发布的导航栏代码适用于 Bootstrap 3。

标签： php html css codeigniter bootstrap-4

【解决方案1】：

使用引导间距。

在ul类中添加ml-5

<ul class="nav navbar-nav ml-5">

您可以从这里获得参考。https://getbootstrap.com/docs/4.1/utilities/spacing/

【讨论】：