Dev Faq
5
votes

En-tête du panneau Bootstrap vertical

J'ai un panneau d'amorçage dont j'ai déplacé le titre vers le côté gauche. Je travaille à faire en sorte que le texte soit vertical (pivoté de 90 degrés).

J'ai cela pour la plupart, mais j'ai du mal à aligner d'autres choses avec le CSS.

Mon objectif final est que l'icône vient avant le titre / sous-titre, tout est centré dans l'en-tête du panneau, et le sous-titre vient sous le titre. 

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

J'ai essayé toutes les propriétés d'alignement que je connaissais (text-align, align-content, etc.) mais elles ne semblaient pas ajuster le contenu des divs comme je m'y attendais.

Comment puis-je aligner le contenu au milieu tout en gardant l'icône à gauche du texte?

(JS Fiddle: http://jsfiddle.net/jbk075c8/2/ )

Objectif final:

entrer l'image description ici

2 commentaires

La hauteur doit-elle être flexible ou peut-elle être fixe? Et bien sûr, avez-vous résolu votre problème?

@IndPendent La hauteur du panneau peut varier en taille et doit donc toujours être au centre, quelle que soit la hauteur.

3 Réponses :

9
votes

Vous devriez pouvoir utiliser une combinaison d'affichage : flex | flex-inline et float pour que cela fonctionne. Voici un exemple: 

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

JS Fiddle Link

Faites-moi savoir si cela vous aide.

3 commentaires

Est-il possible de rendre la tête de panneau pleine hauteur? J'ai essayé d'ajouter plus de contenu pour voir s'il reste toujours au milieu, mais il ne semble pas qu'il s'adapte à la hauteur du corps. Votre exemple semble prometteur si je peux m'assurer qu'il reste au centre lorsque le panneau est d'une plus grande hauteur. jsfiddle.net/f39o02Lk

Vous pouvez le faire prendre toute la hauteur en ajustant la position, voir ici jsfiddle.net/4judq6k1 mais maintenant il y a quelques ajustements d'alignement à faire ... @SBB plus près, voir la jsfiddle.net/4judq6k1/2

Cette solution ne rend pas bien compte d'avoir plusieurs de ces boîtes avec des titres de longueurs différentes. Vous devez ajouter du CSS pour ajuster le décalage de chaque titre individuellement. Si vous avez besoin d'une solution qui gardera tout centré quelle que soit la largeur du titre, envisagez d'utiliser position: absolue avec transform: translate . Il peut correctement centrer le titre même lorsqu'il est tourné comme demandé.

2
votes

L'autre solution utilisant flex ne tient pas compte des différentes longueurs dans les zones de titre. Si vous voulez une solution qui puisse garder tout le contenu correctement centré même si les titres sont de longueur différente, vous voulez utiliser un positionnement absolu.

Le code et l'exemple ci-dessous montrent avec 3 zones de titre sur la page, toutes avec des longueurs de titre différentes . Pourtant, gardez les titres parfaitement centrés dans le cadre de titre gauche.

Ajustez le .panel-leftheading sur 

position: absolute; //absolute position for the child
left: 50%; //move left half width of the parent div
top: 50%; //move top half width of the parent div
transform: rotate(-90deg) translate(-50%, -50%); //rotate the child 90 degrees, as well as translate the container -50% of it's own width to the left, and top.
transform-origin: left top;

Cela garantit que votre panneau d'en-tête est toujours à gauche, toujours à 100% de la hauteur du parent et nous donne un bon conteneur pour faire notre tour du centre absolu.

mettre à jour le .panel-lefttitle pour avoir: 

  position: absolute;
  top: 0; //stick to the top
  left: 0; //stick to the left
  height: 100%; //have a height equal 100% of the parent div
  width: 42px; //be 42px wide

Maintenant, c'est déroutant au début, mais je vais vous guider à travers.

gauche: 50%; et haut: 50% déplacent tous les deux l'élément enfant de 50% de la largeur des parents respectivement à partir de la gauche et du haut. cela signifie donc que notre élément enfant aura un de ses coins exactement au centre de l'élément conteneur.

Nous voulons ensuite déplacer cet élément de 50% de sa propre largeur, et de 50% de sa propre hauteur en arrière de ce que nous venons de déplacer, car cela mettra le centre du L'élément enfant au centre de l'élément conteneur.

Nous pouvons y parvenir en ajoutant le translate (-50%, -50%) à votre transformer. transform: translate lorsque le pourcentage est spécifié, déplacera l'élément en fonction de sa propre taille.

Ceci centre correctement le div enfant dans le div conteneur, même lorsque nous effectuons une rotation de 90 degrés dessus. Permettre à un seul morceau de css de gérer plusieurs d'entre eux, même si chacun a une longueur de texte légèrement différente.

Voici un violon avec un exemple fonctionnel: http://jsfiddle.net/bke20hyg/

1 commentaires

La réponse acceptée ne fonctionne en effet pas très bien pour moi.

0
votes

J'espère que cela vous aidera à aligner ce 

.panel-default>.panel-leftheading {
    height: 100%;
    position: absolute;
}
.panel-lefttitle{
    position: absolute;
    bottom: 1em;
}
.titleWrapper center i{
        position: absolute;
    left: -1.1em;
    top: 0.2em;
    font-size:1.5em;

}

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor