垂直自举面板标题

时间：2016-08-29 08:53:28

标签： html css twitter-bootstrap panel

我正在尝试设计垂直引导程序标题面板，而我几乎已经使用此

实现了它 

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

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

vertical Panel Bootstrap

我需要改变什么css？

4 个答案:

答案 0 :(得分：1)

您可以移除transform和margin-left，然后将width（此处设置为0）小于font-size（此处为16px）添加到效果：

.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中添加了文本垂直流动以保留空格/换行符。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

答案 1 :(得分：1)

  1. 您可以通过<br>元素使用手动样式，但这会很烦人。

  2. 您可以将每个字母包装到自己的<span>元素中。这会更舒服，但仍然太静止。

  3. 使用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;
}

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

答案 2 :(得分：0)

这可能会有所帮助。我将每个字母转换成一个span-element并旋转每个字母。它不是很漂亮，但展示了如何解决这个问题。

我只添加了一些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>

答案 3 :(得分：0)

我更改了width的{​​{1}}和margin，删除了h3并更改了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;
}

相关问题
最新问题