Question

我正在尝试在Bootstrap中创建一个垂直标题，并且我遇到了一些问题。我正在学习Bootstrap，所以请耐心等待我。

我创建了一个JSFiddle页面，以便您可以看到问题是什么以及我想要实现的目标。代码如下。但是，如果您查看JSFiddle页面，请尽可能使结果屏幕尽可能大。如果你这样做，你应该看到我想要达到的预期结果。一个垂直标题，右侧（或顶部）有两行对齐文本，文本后面有蓝色背景色。如果您然后将结果屏幕缩小，那么您可以看到问题所在。如何创建这种类型的结果，使其在大屏幕和小屏幕中都相同？（显然在较小的屏幕中我想要一个较小的字体大小，因此需要背景颜色，但要保持相同的整体垂直标题。）

另外，我尝试使用两个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-->

.testimonials {
background-color: #181f17;
}

.rotated-text {
    background-color: #808080;

}

.section-header {
-webkit-transform: rotate(90deg); 
 -moz-transform: rotate(90deg); 
  -ms-transform: rotate(90deg); 
   -o-transform: rotate(90deg); 
      transform: rotate(-90deg);
margin: 88px 0 90px -75px;
}

.headerTitle {
font-family: 'Novecento-Light';
color: #fff;
font-size: 28pt;  
float: right;
line-height: 24pt;
}

.header-highlight {
font-family: 'Novecento-Light';
color: #f6f5a3;
font-size: 18pt;
white-space: nowrap; 
float: right;
}

.col-lg-1 {
background-color: #305e6d;
height: 368px;
margin: 90px 15px;
}

http://jsfiddle.net/popflier/0fc8gg2c/

感谢您的帮助。

Answer 1

第一步：将col-lg-1更改为col-xs-1

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

http://jsfiddle.net/t5kL9yd7/

Answer 2

我不会在这里使用网格系统。很多你不需要和非常混乱的HTML课程。也使用transform-orgin。它比较干净。然后只使用媒体查询来缩小字体大小，调整.bg和旋转文本。

DEMO：http://jsfiddle.net/7x4zn2d1/

回答此主题中的评论：

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

是否根据经验使用Bootstrap网格系统或其他组件。通常，如果它需要大量的包装器和大量覆盖Bootstrap类，那么它是不值得的。但是什么包括＆＃34;批次＆＃34;是主观的。如果您使用框架，最好浏览文档及其示例。如果有一个类似的外观组件，那么使用它作为起点。当您学习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-->

<强> CSS

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

如何使用右对齐文本和彩色背景创建垂直标题？

2 个答案:

DEMO：http://jsfiddle.net/7x4zn2d1/