Bootstrap 列 100% 高度
Bootstrap columns 100% height
我在使用 Bootstrap 列时遇到一些问题,我有以下代码:
.vertical-line{
height: 100%;
border-right: 2px solid #ebebeb;
margin-top: 5px;
}
<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>
也在http://jsfiddle.net/z55z3den/1/
所以,我想做的是带有 class quote 的容器采用其父级的高度,然后我可以看到垂直线设置在带有 class 竖线
的容器
像这样:
我一直在做一些研究,我在 CSS 中找到了一些关于 flex 属性的东西,但我没能让它发挥作用。
希望大家帮帮我
在此先致谢。
垂直线与内容高度相同,由于最后一个边距看起来更大
.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;
}
<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>
将代码添加到 class 正文:
.body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
我可以建议一个不同的方法吗?
只需使用伪 :before
和 :after
元素覆盖 <blockquote>
元素的默认 bootstrap 样式。这样会简单很多。这样您就不需要加载额外的图像,也不必将元素分成几列。
这是一个例子:
@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: "1C";*/
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 列时遇到一些问题,我有以下代码:
.vertical-line{
height: 100%;
border-right: 2px solid #ebebeb;
margin-top: 5px;
}
<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>
也在http://jsfiddle.net/z55z3den/1/
所以,我想做的是带有 class quote 的容器采用其父级的高度,然后我可以看到垂直线设置在带有 class 竖线
的容器像这样:
我一直在做一些研究,我在 CSS 中找到了一些关于 flex 属性的东西,但我没能让它发挥作用。
希望大家帮帮我
在此先致谢。
垂直线与内容高度相同,由于最后一个边距看起来更大
.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;
}
<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>
将代码添加到 class 正文:
.body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
我可以建议一个不同的方法吗?
只需使用伪 :before
和 :after
元素覆盖 <blockquote>
元素的默认 bootstrap 样式。这样会简单很多。这样您就不需要加载额外的图像,也不必将元素分成几列。
这是一个例子:
@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: "1C";*/
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>