Twitter bootstrap 如何创建具有右对齐文本和彩色背景的垂直标题？

我试图在引导中创建一个垂直头，但我遇到了一些问题。我正在学习Bootstrap，所以请耐心等待我

我创建了一个JSFIDLE页面，以便您可以看到问题所在，以及我试图实现的目标。代码如下。但是，如果您查看JSFIDLE页面，请将结果屏幕设置为尽可能大。如果你这样做了，你就会看到我想要达到的结果。一种垂直标题，右边（或顶部）有两行对齐的文本，文本后面有蓝色背景。如果将结果屏幕缩小，则可以看到问题所在。如何创建这种类型的结果，使其在大屏幕和小屏幕上都相同？（显然，在较小的屏幕中，我想要较小的字体大小和背景色，但要保持相同的整体垂直标题。）

另外，我试着用两个H标记来设置它，但无法使文本向右对齐。只有当我创建LI标签时，我才能将文本对齐到我想要的位置

<section id="testimonials" class="testimonials">
<div class="container">
    <div class="row">
        <div class="col-lg-1">
            <div class="section-header">
                <ul class="list-unstyled rotated-text">
                    <li class="headerTitle">Testimonials</li> 
                    <li class="header-highlight">Dry Cleaning Station</li>
                </ul> 
            </div>
        </div> <!--end col-lg-6-->
    </div> <!--end row-->
</div> <!--end container-->

---

谢谢您的帮助。

第一步：将

col-lg-1

更改为

col-xs-1

第二步：在较小的屏幕上缩小字体（使用媒体查询）

---

我不会在这里使用网格系统。它有很多你不需要的html类，而且非常混乱。也可以使用transform-orgin。它更干净。然后，只需使用媒体查询来缩小字体大小，并调整.bg和旋转文本

演示： 对本帖中评论的回答：

如果你看一下GetBootstrap.com上的任何一个例子，GetBootstrap.com本身，所有的展示网站，以及地球上大多数的每个引导主题，它们都使用自定义CSS、添加的类和更多的jQuery脚本。Bootstrap是一个使用CSS和JS的框架。它不是CSS本身，也不是HTML或JS，而是使用这些技术。您可以添加到使用Bootstrap构建的站点，也可以从中获取（这就是为什么GetBootstrap.com上的定制程序允许您进行选择）

是否使用引导网格系统或其他组件取决于经验。一般来说，如果需要大量的包装和过多地编写引导类，那就不值得了。但“地段”的构成是主观的。如果您使用的是框架，那么最好是浏览文档及其示例。如果有一个外观相似的组件，则将其作为起点。随着您学习CSS并获得更多经验，您将知道使用什么、不使用什么以及需要添加什么

HTML

<section id="testimonials" class="testimonials">
   <div class="section-header">
      <h3 class="headerTitle">Testimonials</h3>
      <h4 class="header-highlight">Dry Cleaning Station</h4>
   </div>
   <span class="bg"></span>
   <div class="content">
      <div class="content-inner">
         Content goes here.
      </div>
   </div>
</section>
<!--end section-->

---

当文本在大屏幕上消失时，不清楚你在追求什么。文本是否应包含在蓝色框中？什么是“垂直标题”？也许一张图片会有帮助。请告诉我们你想做什么？文本会留在屏幕上吗？为什么要使用网格系统？无论如何你使用的是只在1200px及以上工作的col-lg，使用col-sm-1或col-xs-1，或者根本不使用网格系统，这并不适用于所有事情。另外，不要像在专栏上那样放边距，如果你看看Matty发布的JSFIDLE链接，你就会知道我想要什么。如果有不同或更好的方法，我应该这样做，那么请让我知道。正如我所说，我正在学习，我想学习如何正确地编写代码。如果我做错了什么，请告诉我。我改变了专栏的页边空白，因为在我花了4个小时尝试了所有其他东西之后，我认为这是我让它工作的唯一方法。顺便说一句，这只是一个更大的网站的代码摘录，我在Bootstrap中为自己编写代码。这就是为什么我要使用引导。是的，这正是我想要的！所以，您唯一更改的是HTML和CSS上的col-lg-1到col-xs-1？谢谢是的，这里有更多关于响应网格的内容，Matty，我已经完成了您所说的，我已经为xs和sm设备设置了媒体查询。我注意到，如果我将窗口放大到480px以上，则报头将中断，直到到达下一个媒体查询@768px。我怎样才能解决这个问题，使我的垂直页眉不会在这两种尺寸之间断裂？我在这里设置了一个JSFiddle，以便您可以看到问题：您设置了两个间隔：“高达480”和“767及更多”，因此480和767之间有一个空的间隔。首先更改为

@介质（最大宽度：767px）

，然后更改为

@介质（最小宽度：768px）

。非常感谢您的帮助。因此，如果站点的其余部分处于引导状态，而本节不处于引导状态，这会影响站点在不同大小的设备上的响应吗？在我参加的所有引导和HTML课程中，没有人说过可以在需要的地方使用引导或HTML。讲师总是对整个站点使用引导，或者根本不使用引导，而只使用HTML/CSS。对于优化、干净的代码，最好的方法是只在需要的区域使用引导网格系统，然后在这样的部分使用HTML/CSS吗？我如何知道何时使用其中一个而不使用另一个？谢谢你的帮助！我在上面的回答中回答了这个问题。谢谢克里斯蒂娜。我感谢你花时间向我解释这件事。我花了很多时间在getbootstrap网站上，在Udemy和Learnable.com上学习HTML/CSS和Bootstrap。我曾经为Flash网站编写代码（仅限AS2），谁知道苹果和Adobe会如此困难，Flash几乎会完全消失。学习框架和HTML/CSS/JS/PHP只需要花一些时间，因为我是一个视觉化的人。不过，我非常感谢你的帮助。

<section id="testimonials" class="testimonials">
   <div class="section-header">
      <h3 class="headerTitle">Testimonials</h3>
      <h4 class="header-highlight">Dry Cleaning Station</h4>
   </div>
   <span class="bg"></span>
   <div class="content">
      <div class="content-inner">
         Content goes here.
      </div>
   </div>
</section>
<!--end section-->

.testimonials {
    background-color: #181f17;
    position: relative;
    height:400px;
}
.section-header {
    transform: rotate(-90deg);
    transform-origin: bottom right;
    position: absolute;
    z-index: 2;
    margin: 0;
    top: 0;
    left:-105px;
}
.testimonials .bg {
    position: absolute;
    display: block;
    height: 100%;
    width: 100px;
    left: 3%;
    top: 0;
    background-color: #305e6d;
}
.section-header * {
    margin: 0
}
.headerTitle {
    font-family: 'Novecento-Light';
    color: #fff;
    font-size: 28pt;
    line-height: 24pt;
}
.header-highlight {
    font-family: 'Novecento-Light';
    color: #f6f5a3;
    font-size: 18pt;
}
.testimonials .content {
    float: left;
    color: #fff;
    padding-left: 3%;
}
.testimonials .content-inner {
    padding: 20px 20px 20px 120px
}