html - 如何使col之间的hr更长？

我正在为我的列结构使用引导程序，并想在列之间绘制一条水平线：

<div class="col-md-2 col-xs-12">
      <div class="col-md-2 icon">

        <i class="fa fa-bandcamp" aria-hidden="true"></i>
      </div>
      <div class="col-md-10 height hidden-xs">
        <p>mycomp account number</p><span class="text">2000299999940</span>
      </div>
      <div class="visible-xs height">
        <hr>
        <p class="col-xs-5">mycomp account number:</p>
        <p class="col-xs-7">2000299999940</p>
      </div>
</div>

<div class="col-md-1">
      <hr class="line" />
</div>

CSS：

.line {
    width: 200px;
    height: 3px;
    background-color: #dadada;
    margin-right:40px;
  }

由于自举列结构的存在，因此存在空白，但是如何在没有所有空间的情况下使行宽呢？ Codepen here

最佳答案

如果您想忽略引导程序中的默认填充和边距，请在css文件中将类设置为

.no-padding-margin
{
padding:0px;
margin: 0px;
}

然后将该类应用于您的引导程序列

<div class="col-md-2 col-xs-12 no-padding-margin">
      <div class="col-md-2 icon">

        <i class="fa fa-bandcamp" aria-hidden="true"></i>
      </div>
      <div class="col-md-10 height hidden-xs">
        <p>mycomp account number</p><span class="text">2000299999940</span>
      </div>
      <div class="visible-xs height">
        <hr>
        <p class="col-xs-5">mycomp account number:</p>
        <p class="col-xs-7">2000299999940</p>
      </div>
</div>

<div class="col-md-1 no-padding-margin">
      <hr class="line" />
</div>

关于html - 如何使col之间的hr更长？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41256235/