Question

很抱歉，如果这是一个新手问题，我就是从Bootstrap开始的。我正在尝试为我的网站构建一个导航栏，并且文本链接被推在一起，因此它们之间没有空间。所以代替这个：

待售汽车出售汽车条款和条件

我有这个：

待售汽车出售汽车条款与条件

我曾尝试用列表重新组织导航栏，但这似乎只会使情况更糟，因为它使文本未对齐并将其推到div的顶部。

这就是我要编写的代码：

<div>
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color:indigo">
        <div class="container">
        <a class="navbar-brand" href="https://localhost:44353/index.html" style="color:white">Cars.com</a>
            <div class="collapse navbar-collapse" id="navbar">
                <div class="navbar-nav">
                    <a class="nav-item active" href="#" style="color:white">Cars for Sale</a>
                    <a class="nav-item active" href="#" style="color:white">Sell a Car</a>
                    <a class="nav-item active" href="#" style="color:white">Terms and Conditions</a>
                </div>
            </div>
        </div>
    </nav>
</div>

我想在文本链接之间留一些空间，以便于阅读。

Answer 1

您还可以使用padding-left或padding-right的CSS属性。 Bootstrap nav的一些类名丢失了，在这里。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:indigo;">
  <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="https://localhost:44353/index.html" style="color:white;">Cars.com</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active">  <a class="nav-item active" href="#" style="color:white">Cars for Sale</a></li>
        <li><a class="nav-item active" href="#" style="color:white">Sell a Car</a></li>
        <li><a class="nav-item active" href="#" style="color:white">Terms and Conditions</a></li> 
        
      </ul>
      
    </div>
  </div>
</nav>

如何分隔引导导航栏中的链接，以便它们之间留有空白？

1 个答案: