web-dev-qa-db-fra.com

Est-ce que bootstrap 4 a un diviseur horizontal intégré?

Est-ce que bootstrap 4 a un diviseur horizontal intégré? Je peux le faire,

<style type="text/css">
.h-divider{
 margin-top:5px;
 margin-bottom:5px;
 height:1px;
 width:100%;
 border-top:1px solid gray;
}
</style>

Mais je veux utiliser le css bootstrap intégré, je ne le trouve nulle part dans la documentation, peut-être me manque-t-il.

csshtml5css3bootstrap-4twitter-bootstrap-4
27
user7339197

HTML a déjà un diviseur horizontal intégré appelé <hr/> (abréviation de "règle horizontale"). Bootstrap styles il comme ceci :

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p>Some text<hr/>More text<p>

49
4castle

Pour Bootstrap 4

<hr> fonctionne toujours pour un diviseur normal. Cependant, si vous voulez un séparateur avec du texte au milieu:

<div class="row">
    <div class="col"><hr></div>
    <div class="col-auto">OR</div>
    <div class="col"><hr></div>
</div>
9
kjdion84

Pour les menus déroulants, oui:

https://v4-alpha.getbootstrap.com/components/dropdowns/

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>
7
user3791372

dans Bootstrap 4.0v

<span class="border-top my-3"></span>

vous pouvez changer my-3 en my-2; m pour "margin", y pour "top and bottom"

7
Anouar Fadili
<div class="dropdown">
  <button data-toggle="dropdown">
      Sample Button
  </button>
  <ul class="dropdown-menu">
      <li>A</li>
      <li>B</li>
      <li class="dropdown-divider"></li>
      <li>C</li>
  </ul>
</div>

Ceci est l'exemple de code pour le diviseur horizontal dans bootstrap 4. La sortie ressemble à ceci:

class = "dropdown-divider" utilisé dans bootstrap 4, tandis que class = "divider" utilisé dans bootstrap 3 pour un diviseur horizontal

0
Mihit Gandhi

   <div class="form-group col-12">
            <hr>
   </div>

0
Fares Younis