减少 html 中垂直线和第二个字段之间的前导间距

Question

我需要一些帮助来解决HTML中的问题。

我在 2 个字段之间创建了垂直线，但垂直线和第二个字段之间存在前导空间。如何根据使用 HTML 和 CSS 的文本减少这些空间和行高？

这是CSS的代码

.row.vertical-divider {
  overflow: hidden;
}
.row.vertical-divider > div[class^="col-"] {
  padding-bottom: 3px;
  border-right: 1px solid #000;
}
.row.vertical-divider div[class^="col-"]:first-child {
  border-left: none;
}
.row.vertical-divider div[class^="col-"]:last-child {
  border-right: none;
}

这是 HTML 的代码

<div class="row vertical-divider rightdiv2">
   <div class="col-xs-2">To</div>
   <div class="col-xs-10">Username</div>
 </div>

输出为：2 个字段之间的垂直线

Answer 1

尝试将行高：1; 添加到父样式中，如下所示：

.row.vertical-divider {
  overflow: hidden;
  line-height: 1;
}

此外，为了将来参考，您尝试过的示例非常有用，因此人们知道要避免尝试什么！

编辑：

误解了你的问题，对不起。

我相信问题是您的文本以您的 col-xs-10 为中心。您可以尝试将其左对齐，或在旁边添加另一个宽度较小的引导列。参见 jsfiddle：

https://jsfiddle.net/rewxz6xu/

使用填充，因为我必须创建空间，或者像我说的那样，在用户名字段的右侧添加新的col-xs-？

Answer 2

试试这个 CSS：

.row.vertical-divider {
  overflow: hidden;
}
.row.vertical-divider > div[class^="col-"] {
  padding-bottom: 3px;
  //border-right: 1px solid #000;
}
.row.vertical-divider div[class^="col-"]:first-child {
  border-left: none;
}
.row.vertical-divider div[class^="col-"]:last-child {
  border-right: none;
}
.col-xs-2 {
  border-right: 1px solid red;
}

Answer 3

如果我理解正确，您可以像这样简单地更改 HTML(对第二个元素使用另一个类(：

<div class="row vertical-divider rightdiv2">
   <div class="col-xs-2">To</div>
   <div class="col-xs-2">Username</div>
 </div>