Question

大家好，所以我正在尝试创建一个在bootstrap中存放的设计，我有一条垂直线，然后它附近有一些文字：

我已经使用bootstrap 3网格系统来创建这个很好，问题是，当我调整窗口大小时，我希望线条会变小但它的作用是将我的所有文本推到它下面，当我想要线条时和文本保持完全相同

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;
}

小提琴链接：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/

Answer 2

如果您希望该行与您的内容完全匹配，则无法设置明确的高度。它永远不会增长或缩小。

为什么不呢：

.maintext {
  border-left: thick solid #ff0000;
}

您必须要么这样做，要么将内容元素放在行元素中。

垂直线推下面的文字

2 个答案: