Question

我已经创建了一个Bootstrap导航栏，在下面，我已经制作了一个容器，我将在其中显示一些描述，如下图所示。我使用了最新版本的bootstrap。

现在，描述文本的对齐方式应与导航栏最左侧项目的对齐方式相匹配，但我从代码中获取的内容如下图所示。

在这里你可以清楚地看到最左边的导航栏项目即CP-210-1按钮的对齐方式与以这是...... 开头的描述文字不匹配。

这是我的代码。

.model-family-navigation-bar {
  background-color: #00853e;
}

.navigation-bar-content {
  color: white;
  font-size: 120%;
}

.dropdown-menu>div>a:hover {
  background: #8dc4d4;
}

.dropdown-menu>div:nth-child(odd) {
  background: #d9d9d9;
}

.dropdown-menu>div:nth-child(even) {
  background: #f9fffe;
}

.border-section {
  border: 2px solid #D0D0D0;
  margin-top: 20px;
}

.greenTitle {
  color: green;
  font-weight: bold;
}

  a:link {
    
    font-size: 120%;
    background-color: transparent; 
    text-decoration: underline;
}

a:visited {
    color: white;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>App5</title>
  <base href="">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <div class="container model-family-navigation-bar" style="min-height: 32px">
    <nav class="navbar navbar-expand-sm navbar-dark model-family-navigation-bar" style="min-height: 32px">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <!-- <div class="col-sm-auto"> -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle navigation-bar-content text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-decoration:none">
              <span id="selected" style="text-decoration:none;font-weight:bold">CP-210-1</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color:#00853e">
              <h1 class="dropdown-header text-white">Model Family</h1>
              <div>
                <!-- <div class="dropdown-divider"></div> -->
                <a class="dropdown-item text-black" (click)="showList()">CP210-1</a>
                <a class="dropdown-item text-black" (click)="showList()">CP210-2</a>
                <a class="dropdown-item text-black" (click)="showList()">CP210-3</a>
                <a class="dropdown-item text-black" (click)="showList()">CP210-4</a>
              </div>
            </div>
          </li>
          <!-- </div> -->
          <!-- <div class="col-sm-auto"> -->
          <li class="nav-item">
            <span class="navigation-bar-content navbar-text text-white ml-4">Proportional Directional Valve</span>
          </li>
          <!-- </div> -->
        </ul>

        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link text-white" href="https://www.google.com/" style="font-size:13px">Data Sheet</a>
          </li>
        </ul>

      </div>
    </nav>
  </div>
  <div class="container border-section mt-2">
    <div class="row" style="min-height:80px;">
      <p class="ml-4 mt-1" style="font-size:20px">This is a proportional, 3 position 4 way, directional control valve</p>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

</body>

</html>

我没有找到任何方法将导航栏的最左侧项目与描述文本对齐。虽然我可以选择在左侧项目中添加左侧填充，但这不是我应该做的。那么，任何人都可以帮我解决如何将文本与按钮项对齐的问题吗？此外，我没有找到任何方法来减少绿色导航栏容器的高度等于第一张图片中给出的高度。

如果我降低高度，则响应行为不会降低浏览器宽度。所以，任何人都可以为此提出建议吗？

Answer 1

作为快速解决方案，您可以尝试设置＆＃34; nav-link＆＃34;的左侧填充。锚到0。

这样的事情：

.navbar-nav .nav-link.dropdown-toggle {
    padding-left: 0px;
}

或者您可以为该元素添加自定义类，并在选择器中使用它。

如何将Bootstrap导航栏的最左侧项目向左移动

1 个答案: