时间戳

首页 > 解决方案 > 垂直引导面板标题

html - 垂直引导面板标题

问题描述

我有一个引导面板，我已将标题移到左侧。我正在努力使文本垂直（旋转 90 度）。

我大部分情况下都有这个，但我在让其他事情与 CSS 保持一致时遇到了一些麻烦。

我的最终目标是图标位于标题/子标题之前，所有内容都位于面板标题的中心，而子标题位于标题下方。

.panel {
  position: relative;
}

.panel-default>.panel-leftheading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.panel-primary>.panel-leftheading {
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}

.panel-success>.panel-leftheading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.panel-info>.panel-leftheading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.panel-warning>.panel-leftheading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.panel-danger>.panel-leftheading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.panel-leftheading {
  width: 42px;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 8px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  float: left;
  height: 100%;
}

.panel-lefttitle {
  margin-top: 110px;
  margin-bottom: 0;
  font-size: 12px;
  color: inherit;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: left top;
  -moz-transform: rotate(-90deg);
  -moz-transform-origin: left top;
  -ms-transform: rotate(-90deg);
  -ms-transform-origin: left top;
  -o-transform: rotate(-90deg);
  -o-transform-origin: left top;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}

.panel-rightbody {
  margin-left: 50px;
  height: 100%;
}

.mainTitle {
  font-style: bold;
  font-size: 14px;
}

.subTitle {
  font-style: italic;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<div class="container">
  <br />
  <div class="row">

    <div class="col-md-12">

      <div class="panel panel-default">
        <div class="panel-leftheading">
          <h3 class="panel-lefttitle">
            <span class="titleWrapper">
                <center>
                <i class="fa fa-user"></i>
              <span class="mainTitle">
                Main Title Here
              </span>
            <br>
            <span class="subTitle">
                (Sub Title)
              </span>
            </center>
            </span>
          </h3>
        </div>
        <div class="panel-rightbody">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          </p>

        </div>
        <div class="clearfix">
        </div>
      </div>
    </div>

我尝试了所有我知道的对齐属性（文本对齐、对齐内容等），但它们似乎没有像我预期的那样调整 div 中的内容。

如何在将图标保持在文本左侧的同时将内容对齐到中间？

（JS小提琴：http: //jsfiddle.net/jbk075c8/2/）

最终目标：

在此处输入图像描述

标签： htmlcsstwitter-bootstrap-3

解决方案

您应该能够使用display: flex | flex-inline和的组合float来使其工作。这是一个例子：

.panel {
  position: relative;
}

.panel-default>.panel-leftheading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}

.panel-primary>.panel-leftheading {
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}

.panel-success>.panel-leftheading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.panel-info>.panel-leftheading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.panel-warning>.panel-leftheading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.panel-danger>.panel-leftheading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.panel-leftheading {
  width: 42px;
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 8px;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  float: left;
  height: 100%;
  display: inline-flex;
}

.panel-lefttitle {
  margin-top: 150px;
  margin-bottom: 0;
  font-size: 12px;
  color: inherit;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: left top;
  -moz-transform: rotate(-90deg);
  -moz-transform-origin: left top;
  -ms-transform: rotate(-90deg);
  -ms-transform-origin: left top;
  -o-transform: rotate(-90deg);
  -o-transform-origin: left top;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}

.panel-lefttitle i {
  margin-bottom: 20px;
  margin-right: 10px;
}

.panel-rightbody {
  margin-left: 50px;
  height: 100%;
}

.mainTitle {
  display: block;
  font-style: bold;
  font-size: 14px;
}

.subTitle {
  font-style: italic;
}

.titleWrapper {
  text-align: center;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<div class="container">
  <br />
  <div class="row">

    <div class="col-md-12">

      <div class="panel panel-default">
        <div class="panel-leftheading">
          <h3 class="panel-lefttitle text-center">
            <i class="fa fa-user pull-left"></i>
            <span class="titleWrapper">
          <span class="mainTitle">
            Main Title Here
          </span>
            <span class="subTitle">
            (Sub Title)
          </span>
            </span>
          </h3>
        </div>
        <div class="panel-rightbody">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          </p>

        </div>
        <div class="clearfix">
        </div>
      </div>
    </div>

JS小提琴链接

让我知道这是否对您有帮助。

推荐阅读