html - 如何创建与 Bootstrap 3 中的行长度相同的垂直线

Question

我在创建垂直线时遇到问题，该垂直线的长度与 bootstrap3 中的父行元素相同。我想要做的是包含 3 个元素的行。行的高度取决于包含内容的列。然后我试图在一列中创建一条垂直线，但我无法获得与内容列高度相同的列。

这是我的代码

.col-section{
  background-image: url("../img/small_steps.png");
  background-repeat: repeat;
  border: 2px;
  border-radius: 2px;
  border-style: solid;
  border-color: black;
  padding: 10px;
}

.vertical-line-right{
  background-color: black;
  width: 2px;
  margin-left: 50%;
  height: 10px;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-5 pull-left col-section">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <div class="col-md-2">
      <div class="vertical-line-right">
      </div>
    </div>
    <div class="col-md-5 pull-left">
      <h1>Test</h1>
    </div>
  </div>

我使用 10px 的高度作为垂直线的高度来显示结果，而我希望它动态地使“lorem ipsum”div 的高度

代码片段的结果是错误的，这是我真正得到的: http://imgur.com/guvMROR

我希望我的问题足够清楚!谢谢

Answer 1

你正在寻找的是一个动态高度的解决方案，其中一个元素的高度根据第二个元素自行调整，不确定这是否只能通过纯 CSS 实现

对 HTML 进行了一些修改

将 col-section 选择器放入 col-md-5 并提供 id="content" 并将其与 jQuery 绑定(bind)。

<div class="container">
    <div class="row">
        <div class="col-md-5 pull-left" id="content">
            <div class="col-section">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col-md-2">
            <div class="vertical-line-right"></div>
        </div>
        <div class="col-md-5 pull-left">
             <h1>Test</h1>
        </div>
    </div>
</div>

CSS

.col-section {
    background-image: url("../img/small_steps.png");
    background-repeat: repeat;
    border: 2px;
    border-radius: 2px;
    border-style: solid;
    border-color: black;
    padding: 10px;
}
.vertical-line-right {
    width: 2px;
    background-color: #000;
}

jQuery

$('document').ready(function () {
   var Height = $('#content').height();
   $('.vertical-line-right').height(Height);
});

Fiddle

为了更好的方法，setInterval 这样，如果页面高度和宽度发生变化，高度会自行调整。

$(document).ready(function(){
    setInterval(borderline,1000);
    function borderline(){
       var Height = $('#content').height();
       $('.vertical-line-right').height(Height);
    }
});

Fiddle 2