html - 垂直线将文本推到其下方

Question

大家好，我正在尝试创建一个在 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你可以看到当窗口缩小时我所有的文本都在它下面，即使我使用媒体查询仍然没有任何反应

Answer 1

我想你想停止包装其余的元素:

.verticalLine {
  border-left: thick solid #ff0000;
  height: 850px;
  overflow: hidden;
  white-space: nowrap;
  float: left;
}

.maintext {
  padding-left: 30px;
}

所以像这样:https://jsfiddle.net/DTcHh/38279/