大家好,我正在尝试创建一个在 Bootstrap 中有反应的设计,如果我有一条垂直线向下,然后在它附近有一些文本,如下所示:
我已经设法使用 bootstrap 3 网格系统创建了这个很好的,问题是,当我调整我的窗口大小时,我希望该行会变小但它所做的是将我的所有文本推到它下面,当我想要该行时to 和 text 保持完全一致
HTML:
<header class="masthead">
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="verticalLine">
</div>
</div>
<div class="col-md-7">
<div class="maintext">
<h1>Text</h1>
<h2>Some text goes here</h2><br>
<br>
<br>
<br>
<br>
<h1 style="width: 600px;">Great design is simplicity and clarity</h1><br>
<h2 style=" margin-top: -19px;">Idea - Design - launch</h2><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p style="font-size: 19px;">View profile ➡</p>
</div>
</div>
</div>
</div>
</header>
CSS:
.verticalLine {
border-left: thick solid #ff0000;
height: 850px;
}
fiddle 链接:here你可以看到当窗口缩小时我所有的文本都在它下面,即使我使用媒体查询仍然没有任何反应
最佳答案
我想你想停止包装其余的元素:
.verticalLine {
border-left: thick solid #ff0000;
height: 850px;
overflow: hidden;
white-space: nowrap;
float: left;
}
.maintext {
padding-left: 30px;
}
关于html - 垂直线将文本推到其下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46699536/