响应式 CSS 内联文本（具有不同的字体大小）答案

【问题标题】：Responsive CSS inline text (with different font-size)响应式 CSS 内联文本（具有不同的字体大小）
【发布时间】：2016-10-09 06:31:40
【问题描述】：

我正在尝试创建带有子标题的标题。很简单，我想实现的东西很少：

文本应该是内联的，大约有 20px 的空间。（当使用 bootstrap 时，它们往往会远离彼此）
当文本比窗口大时，应该分别按标题和副标题分成两行。

如果它看起来像这样（但只是文本），我会很高兴 - 主登录页面。我很好奇他是怎么做到的：P

http://underscoredesign.com/

尝试使用引导程序：

  <div class="page1">
        <div class="container-fluid middlepage">
            <div class="col-lg-8 col-lg-offset-2">
                <div class="col-md-8">
                      <h1>ABCDEF<h1>
                </div>
                 <div class="col-md-4">
                      <h5>ghjklmnopqrstuv</h5>
                 </div>
            </div>
                 </div>
              </div>
        </div>
    </div>

【问题讨论】：

您之所以被否决，是因为在此站点上，您必须向我们展示您的尝试，并让我们知道您遇到的问题，然后我们会很乐意帮助您解决问题...
How to ask?

标签： html css twitter-bootstrap header sass

【解决方案1】：

**更新答案

首先，一步一步地阅读这篇文章，我想你会更好地理解：http://getbootstrap.com/css/

其次，您可能不需要将额外的 div 包裹在容器 (.page1) 周围。您可以将其添加到您的容器 div 中。不确定您要对 .middlepage 类做什么。中心？您可以使用引导类来做到这一点，因此您不必创建新的 CSS 类。

第三，您还没有创建任何行。 Bootstrap 是一个类似表格的网格系统。你有行和列。请阅读所有这些：http://www.w3schools.com/bootstrap/

第四，Bootstrap 是一个 12 列的网格系统。包含两个较小列的大列加起来只有 10 个。

祝你好运！

由于我们不知道您尝试了什么（正如其他评论者所说），这里有一些在黑暗中的刺：

尝试将您的项目左对齐
尝试边距/填充样式
如果您希望在屏幕较小时将列从 2-up 切换到 1-up，则必须指定媒体查询大小并在该大小时将每列增加到 12
你也可以试试 FlexBox

【讨论】：