Question

我对Bootstrap列有一些麻烦，我有这个代码：

＆＃13;

.vertical-line{
    height: 100%;
    border-right: 2px solid #ebebeb;
    margin-top: 5px;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row body">
    <div class="quote col-sm-1">
      <img src="http://s18.postimg.org/6kmdp3w05/quotes.png" alt="Gray quote">
      <div class="vertical-line"></div>
    </div>

    <div class="content col-sm-11">
      <div class="row">  
        <div class="text col-sm-12">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.</p>
      
          <p>Nulla felis magna, molestie faucibus maximus a, eleifend vel nulla. Ut ornare justo ut ipsum eleifend, in ultricies mi blandit. Nam condimentum tortor elit, non imperdiet tortor tempor non. Suspendisse sed egestas dui. Donec fermentum ipsum vel orci suscipit, vel dignissim enim molestie. Aenean interdum interdum diam, at laoreet tortor tincidunt accumsan. Morbi nec arcu aliquam, interdum diam ac, volutpat risus. Proin blandit, sem sit amet venenatis interdum, dui dolor ornare dolor, et tincidunt lectus lacus sit amet elit. Morbi ullamcorper, sem non feugiat ullamcorper, neque urna sagittis mi, nec tempus justo augue semper neque. Integer ut felis ac urna finibus gravida sit amet vitae sapien. Integer erat dui, ultrices at magna non, euismod sagittis est.
            </p>
          </div>
        </div>
    </div>
</div>

＆＃13;

同样在http://jsfiddle.net/z55z3den/1/

所以，我想做的是具有引用类的容器获取其父级的高度，然后我可以看到容器中的垂直线设置为 vertical-线

这样的事情：

我一直在做一些研究，我在CSS中发现了一些关于flex属性的内容，但我还没有能够使它工作。

我希望你们能帮帮我。

先谢谢。

Answer 1

垂直线与内容的高度相同，因为最后一个边距看起来更大

＆＃13;

.body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display:  flex;
}

.quote {
  position: relative;
} 

.text {
padding-left: 20px;
}

.vertical-line{
  position: absolute;
  bottom: 0;
  right: 0;
    height: calc(100% - 40px);
    border-right: 2px solid #ebebeb;
    margin-top: 5px;
}

＆＃13;

<div class="row body">
    <div class="quote col-sm-1">
      <img src="http://s18.postimg.org/6kmdp3w05/quotes.png" alt="Gray quote">
      <div class="vertical-line"></div>
    </div>

    <div class="content col-sm-11">
      <div class="row">  
        <div class="text col-sm-12">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.</p>
      
          <p>Nulla felis magna, molestie faucibus maximus a, eleifend vel nulla. Ut ornare justo ut ipsum eleifend, in ultricies mi blandit. Nam condimentum tortor elit, non imperdiet tortor tempor non. Suspendisse sed egestas dui. Donec fermentum ipsum vel orci suscipit, vel dignissim enim molestie. Aenean interdum interdum diam, at laoreet tortor tincidunt accumsan. Morbi nec arcu aliquam, interdum diam ac, volutpat risus. Proin blandit, sem sit amet venenatis interdum, dui dolor ornare dolor, et tincidunt lectus lacus sit amet elit. Morbi ullamcorper, sem non feugiat ullamcorper, neque urna sagittis mi, nec tempus justo augue semper neque. Integer ut felis ac urna finibus gravida sit amet vitae sapien. Integer erat dui, ultrices at magna non, euismod sagittis est.
            </p>
          </div>
        </div>
    </div>
</div>

＆＃13;

向类体添加代码：

.body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display:  flex; 
}

Answer 2

我建议采用不同的方法。

使用伪<blockquote>和:before元素覆盖:after元素的默认引导样式。这将简单得多。这样您就不需要加载额外的图像，也不必将元素分成列。

以下是一个例子：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

blockquote {
    position: relative;
    border-left-width: 0px;
    margin: 20px 40px;
    font-style: italic;
    color: #aaaaa5;
}

blockquote:before {
    content:url('http://s18.postimg.org/6kmdp3w05/quotes.png');
    /*content: "\201C";*/
    color: #ddddd5;
    position: absolute;
    top: -92px;
    left: -42px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 128px;
}

blockquote:after {
    content: "";
    width: 2px;
    position: absolute;
    left: 0px;
    top: 52px;
    background-color: #ddddd5;
    height: calc(100% - 58px);
}

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <blockquote>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.
        </p>
      </blockquote>
    </div>
  </div>
</div>

Bootstrap列100％高度

2 个答案: