0
votes

Impossible de faire une barre latérale gauche

J'ai une DIV gauche avec id sidenav code> et un droit principal code> divisez comme celui-ci

p>



<div class="row">
  <!-- navigation sidebar -->
  <div class="col-2 pt-5" id="sideNav">
    ...
  </div>

  <!-- main content area -->
  <main class="col-10">
    ...
  </main>
</div>

html css bootstrap-4

3 commentaires

Donner le rembourrage-gauche à la main (largeur de la barre latérale)

Ouais, cela fonctionnerait mais cela signifie que je devrai également écrire une règle de CSS différente pour diverses tailles d'écran. N'y a-t-il pas un moyen de le faire fonctionner sans écrire plusieurs règles?

Vous n'avez pas vraiment besoin de positionner absolu si vous allez faire la première hauteur de la Div. Il suffit de mettre les deux divs comme flotteur: à gauche;

4 Réponses :

0
votes

c'est parce que corrigé obtient "ignoré" par d'autres conteneurs. Il est à la main comme si c'était absolu. Vous pouvez donner à votre barre latérale une largeur fixe et votre principal rembourrage.

#sideNav {
  background-color: #012d20;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  border-right-style: groove;
  height: 100vh;
  width: 350px;
}

main {
  padding-left: 350px;
}

0 commentaires

1
votes

La raison pour laquelle cela ne fonctionne pas pour vous, c'est parce que la ligne a une ligne d'affichage Flex, de sorte que tous les cols ci-dessous s'inscrivent dans cette ligne.

Vos cols sont ensuite espacés via leur valeur donnée par leur valeur donnée. COL-3 COL-4 etc p>

En modifiant le type d'affichage de la colonne (à fixer dans votre exemple), vous le supprimez de l'espacement Flex, et votre navigation principale se déplacera à gauche car vous ne l'avez pas compensé. . P>

Pour résoudre ce problème, n'en ajoutez pas de rembourrage, car d'autres ont suggéré, Bootstrap a des cours qui gèrent cela. Au lieu de cela, ajoutez Offset-2 à votre valeur de navigation principale et laissez tout le reste comme c'est. P>

EXEMPLE SNIPPET FORT> P>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <!-- navigation sidebar -->
  <div class="col-2 pt-5" id="sideNav">
    ...
  </div>

  <!-- main content area -->
  <main class="col-10 offset-2">
    ...
  </main>
</div>

1 commentaires

Super, utiliser le décalage de bootstrap.

0
votes

permet d'essayer,

iam ajoutant de la largeur pour Sidenav environ 40px; le même padding-gauche iam Mettez # contenu principal. p>

HTML P>

        #sideNav {
            background-color: #012d20;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            overflow: hidden;
            border-right-style: groove;
            height: 100%;
            width:40px;
         }

         #main-content{
          width:100%;
          float:left;
          padding:0 0 0 40px;
          background:yellow;
         }

0 commentaires

0
votes

Je voyais que vous utilisez Bootstrap Grid, afin de garder la grille qui fonctionne, je vous recommande de mettre votre conteneur fixe dans le .col-2 code> div

p>


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <!-- navigation sidebar -->
      <div class="col-2 pt-5">
        <div id="sideNav">
          ...
        </div>
      </div>

      <!-- main content area -->
      <main class="col-10">
        ...
      </main>
    </div>

0 commentaires