我有7 col-md-1和1 col-md-2。如何摆脱最后一项和之前一项之间的空间？

Question

我想摆脱下载和联系我们之间的空白。 我在下面发布了一张照片，展示了我的代码现在的外观。

<div class="row" align="center" >
                     <div class="col-md-1"><a>System</a></div>
                     <div class="col-md-1"><a>Technology</a></div>
                     <div class="col-md-1"><a>Testimonial</a></div>
                     <div class="col-md-1"><a>About</a></div>
                     <div class="col-md-1"><a>Careers</a></div>
                     <div class="col-md-1"><a>News</a></div>
                     <div class="col-md-1"><a>Downloads</a></div>
                     <div class="col-md-2"><a>Contact Us</a></div>
                 </div>

Answer 1

您的文字与每个div的中心对齐。

div之间没有空格；最后一列之后只有空格。

类.col-md-2将占据2列，使其看起来像div之间有间隔，但是如果在每个div周围放置边框，您会发现实际上不是这种情况；

请参见此 codepen ，其中显示了所描述的效果。

您可以选择执行自己想做的事情：

• 为所有列提供相同的类（即col-md-1）（请参阅潜在的解决方法1）
• 使用flex在每个元素周围或之间放置空间（请参阅潜在的解决方案2）
  • 请注意，Bootstrap v4使用容器上的nav-justified类来完成此操作。
• 使用flex使每个元素分别增长到其大小（请参阅潜在的解决方法3）
  • 请注意，Bootstrap v4使用容器上的nav-fill类来完成此操作。
• 使用text-left类将锚定位在div中（请参阅@Neyt评论）

Answer 2

使用.offset-md- *类将列向右移动。这些类通过*列增加一列的左边距。例如，.offset-md-4将.col-md-4移动到四列。

除了在响应断点处清除列之外，您可能还需要重置偏移量。

更多信息https://getbootstrap.com/docs/4.0/layout/grid/#offset-classes

Answer 3

您可以为最后一列提供col-md-1类。

为什么要给它一类col-md-2？

Answer 4

您正在使用行和列作为导航，如果这样的话，您实际上应该使用引导导航或导航栏构造。

还使用Bootstrap 3或4吗？

有很多方法可以在BS4中实现导航，下面的代码片段展示了一些使用带有不同间距修饰符的Bootstrap 4 Nav在全页模式下运行的方法：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<nav class="nav">
  <a class="nav-link" href="#">System</a>
  <a class="nav-link" href="#">Technology</a>
  <a class="nav-link" href="#">Testimonial</a>
  <a class="nav-link" href="#">About</a>
  <a class="nav-link" href="#">Careers</a>
  <a class="nav-link" href="#">News</a>
  <a class="nav-link" href="#">Downloads</a>
  <a class="nav-link" href="#">Contact Us</a>
</nav>

<nav class="nav nav-fill">
  <a class="nav-item nav-link" href="#">System</a>
  <a class="nav-item nav-link" href="#">Technology</a>
  <a class="nav-item nav-link" href="#">Testimonial</a>
  <a class="nav-item nav-link" href="#">About</a>
  <a class="nav-item nav-link" href="#">Careers</a>
  <a class="nav-item nav-link" href="#">News</a>
  <a class="nav-item nav-link" href="#">Downloads</a>
  <a class="nav-item nav-link" href="#">Contact Us</a>
</nav>

<nav class="nav nav-justified">
  <a class="nav-item nav-link" href="#">System</a>
  <a class="nav-item nav-link" href="#">Technology</a>
  <a class="nav-item nav-link" href="#">Testimonial</a>
  <a class="nav-item nav-link" href="#">About</a>
  <a class="nav-item nav-link" href="#">Careers</a>
  <a class="nav-item nav-link" href="#">News</a>
  <a class="nav-item nav-link" href="#">Downloads</a>
  <a class="nav-item nav-link" href="#">Contact Us</a>
</nav>