1. 首頁
  2. 問答
  3. 垂直引導面板接頭

垂直引導面板接頭

2016-08-29 82 views
1

我想設計垂直引導頭面板，並使用該垂直引導面板接頭

.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"> 
 
    \t <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？

來源

2016-08-29 iGyan.Org

回答

1

您可以刪除transform S和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爲文本流垂直保留空白/換行符。

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

讓我知道你對這個意見。謝謝！

來源

2016-08-29 09:06:31 kukkuz

+0

由於它的工作原理，但我看不到面板和標題之間的適當空間。任何方式來實現？ –

+0

設置'width'爲0和'whitespace：pre-wrap'，我想你有你需要的東西？ – kukkuz

+0

@iGyan.Org相應地編輯了答案。請檢查它是否適合你？ – kukkuz

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

您已經設置width:0所以每一個字母被顯示在一個單獨的行。 Live Demo

來源

2016-08-29 09:08:39 Aer0

0

這可能有幫助。我將每個字母轉換爲一個span元素並旋轉每個元素。它不是很漂亮，但展示瞭如何解決這個問題。

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

來源

2016-08-29 09:09:43 n2o

0

我已經改變了width和你h3的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>

來源

2016-08-29 09:16:28

相關問題

 相關問題