web-dev-qa-db-fra.com

Bordure inférieure sur la ligne Bootstrap

Je crée un en-tête pour une section d'une page à l'aide du système de grille de Bootstrap, comme suit:

<div class="row">
    <div class="col-sm-10">
        Heading Text
    </div>
    <div class="col-sm-2 text-right">
        <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
        <a href="#"><span class="glyphicon glyphicon-trash"></span></a>
    </div>
</div>

Ce que je veux faire, c'est ajouter une règle - une ligne horizontale - en dessous de la ligne d'en-tête, afin qu'elle ressemble à ceci (cela utilise différentes icônes, mais ne vous inquiétez pas à ce sujet):  Example

Je peux y parvenir parfaitement en ajoutant ce code avant la balise de fermeture de la div avec la classe .row:

<div class="col-sm-12">
    <div style='border-bottom:1px solid #ccc;'></div>
</div>

Cependant, cela semble compliqué d’ajouter partout, même si je déplace le style dans la feuille de style. J'ai évidemment pu obtenir le même effet en utilisant append dans jQuery (bien que cela ait posé problème en soi), mais ce que j'aimerais vraiment, c'est accomplir cela en utilisant du CSS pur. 

Idéalement, j'ajouterais une classe à la div avec la classe .row et l'ajout de la ligne serait géré par CSS dans la feuille de style, mais je n'arrive pas à le comprendre. L'obstacle principal est que l'enfant divs de la ligne ait un remplissage de 15px gauche et à droite, donc si j'ajoute la bordure inférieure à la ligne parent div, la ligne s'étend au-delà du contenu de l'en-tête à l'une ou l'autre extrémité.

Existe-t-il un moyen de réaliser ce que je veux en utilisant du CSS pur?

csstwitter-bootstrap-3
8
Philip Stratford

Vous pouvez le faire avec un pseudo-élément avec des marges gauche et droite pour résoudre le problème de remplissage:

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";

.row-bordered:after {
  content: "";
  display: block;
  border-bottom: 1px solid #ccc;
  margin: 0 15px;
}
<div class="container">
  <div class="row row-bordered">
    <div class="col-xs-10">
      Heading Text
    </div>
    <div class="col-xs-2 text-right">
      <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
      <a href="#"><span class="glyphicon glyphicon-trash"></span></a>
    </div>
  </div>
</div>

16
Turnip

La solution ci-dessus fonctionne plus longtemps dans Bootstrap 4 en raison du passage à Flexbox, mais quelques modifications la corrigent:

.row-bordered {
  position: relative;
}

.row-bordered:after {
  content: "";
  display: block;
  border-bottom: 1px solid #ccc;
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
}
<div class="row row-border">
  <div class="col-sm-10">
    Heading Text
  </div>
  <div class="col-sm-2 text-right">
    <a href="#"><span class="glyphicon glyphicon-pencil"></span></a>
    <a href="#"><span class="glyphicon glyphicon-trash"></span></a>
  </div>
</div>

0
Mav the Evil