Question

我想将导航栏组件/按钮向右移动一点。但是如何？请谢谢！以下是我在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!

请参阅屏幕截图

Answer 1

使用Bootstrap间距。

在ul类中添加ml-5

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

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

Answer 2

在导航栏类中尝试使用nav navbar-nav navbar-right

从

更改

<ul class="nav navbar-nav">

到

<ul class="nav navbar-nav navbar-right">

Codeigniter导航栏调整/对齐问题

2 个答案: