Question

我正在为我的列结构使用bootstrap，并希望在列之间绘制一条水平线：

<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

Answer 1

以防你想忽略默认填充和引导程序中的边距使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>

Answer 2

我理解你只是希望你的线路更长。那么为什么不从行所在的col中删除填充。如果需要，还可以在width:100%上添加.line。

代码：

.line {
  width: 100%;
  height: 3px;
  background-color: #dadada;
}
.col-md-1 {
  padding-left:0;
  padding-right:0;
}

如何让小时之间的hr更长？

2 个答案: