垂直 bootstrap 面板 header

Question

我正在尝试设计垂直 bootstrap header 面板，我几乎已经用这个

实现了

.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: 10px 15px;
    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%;
    position: absolute;
}

.panel-lefttitle
{
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 15px;
    font-size: 16px;
    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;
    position: absolute;
    white-space: nowrap;
}

.panel-rightbody
{
    float: left;
    margin-left: 45px;
    padding: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="page-header">
    </div>
    <div class="row">
     <div class="col-md-6">

<div class="panel panel-primary">
  <div class="panel-leftheading">
      <h3 class="panel-lefttitle">Panel title</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 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>
      
  </div>
    <div class="clearfix">
    </div>
</div>

    </div>
</div>

现在 header 设置为垂直，但字体对齐方式与预期不符。 header 上的字体应该是可读的，并且必须像这张图片一样是水平的

我需要更改什么css？

Answer 1

你可以把transform和margin-left去掉，在font-size（这里设置16px）后加上一个width（这里设置为0）得到效果：

.panel-lefttitle {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: center;
  width: 0;
}

另请注意，在 word-wrap: break-word 和 white-space: pre-wrap 中添加了垂直排列的文本，保留空格/换行符。

.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: 10px 15px;
  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%;
  position: absolute;
}
.panel-lefttitle {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: center;
  width: 0;
}
.panel-rightbody {
  float: left;
  margin-left: 45px;
  padding: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="page-header">
  </div>
  <div class="row">
    <div class="col-md-6">

      <div class="panel panel-primary">
        <div class="panel-leftheading">
          <h3 class="panel-lefttitle">Panel title</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
            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>

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

    </div>
  </div>

让我知道您对此的反馈。谢谢！

Answer 2

您可以通过 <br> 元素使用手动样式，但这会很烦人。
您可以将每个字母包装到它自己的 <span> 元素中。这样会更舒服，但仍然太静态了。

使用css。更准确地说，使用 word-wrap。为此，您必须像这样调整 .panel-lefttitle 样式：

.panel-lefttitle {
    width: 0;
    word-break: break-word;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
    position: absolute;
}

您必须设置 width:0 以便每个字母都显示在单独的行中。 Live Demo

Answer 3

这可能会有帮助。我将每个字母转换为一个跨度元素并旋转了每个字母。它不是很漂亮，但展示了如何解决这个问题。

我只添加了一些 JavaScript 来实现您想要的行为。

此代码（部分）来自 Matt Whipple 的回答 in this post。

$(function() {
    $(".panel-lefttitle").html(("<span>" + $(".panel-lefttitle").html().split("").join("</span><span>") + "</span>"));
    $(".panel-lefttitle span").each(function() {
        $(this).css({
            "-webkit-transform": "rotate(-90deg)",
            "display": "inline-block",
            "letter-spacing": "1em"
        });
    });
});

.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: 10px 15px;
    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%;
    position: absolute;
}

.panel-lefttitle
{
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 15px;
    font-size: 16px;
    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;
    position: absolute;
    white-space: nowrap;
}

.panel-rightbody
{
    float: left;
    margin-left: 45px;
    padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="page-header">
    </div>
    <div class="row">
     <div class="col-md-6">

<div class="panel panel-primary">
  <div class="panel-leftheading">
      <h3 class="panel-lefttitle">Panel title</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 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>
      
  </div>
    <div class="clearfix">
    </div>
</div>

    </div>
</div>

Answer 4

我已经更改了您h3的width和margin，删除了transform并更改了white-space。

如果你想改变字母的对齐方式，你可以改变text-align。

这是满足您需要的解决方案：

.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: 10px 15px;
  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%;
  position: absolute;
}
.panel-lefttitle {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0px;
  font-size: 16px;
  color: inherit;
  position: absolute;
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 7px;
  line-height: 16px;
  text-align: left;
}
.panel-rightbody {
  float: left;
  margin-left: 45px;
  padding: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="page-header">
  </div>
  <div class="row">
    <div class="col-md-6">

      <div class="panel panel-primary">
        <div class="panel-leftheading">
          <h3 class="panel-lefttitle">Panel title</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
            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>

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

    </div>
  </div>

垂直 bootstrap 面板 header

Vertical bootstrap panel header

html

css

panel

twitter-bootstrap