[Bootstrap] poser 1 div de chaque cotés du menu

Sujet résolu

18 septembre 2017 à 17:50:56

Bonjour à tous,

Voila je ne connais pas trop Bootstrap, mais cherchant à réaliser le cours "Découper et intégrer une maquette" je dois l'utiliser.

Je cherche actuellement à placer une div de chaque cotés de la navbar sur la même row.

Mais voila je ne sais pas si c'est possible, les test que j'ai fait jusqu'à maintenant ne sont pas concluant. Donc si quelqu'un avait une idée je ne serrais pas contre.

voici ce que je cherche à faire.

Merci d'avance si quelqu'un à une idée.

Compos sui.

Lamecarlate

18 septembre 2017 à 18:28:17

Bonjour,

et du coup, quel est le code que tu as produit ? Car le schéma que tu donnes me semble clair et facile à réaliser.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

exen

18 septembre 2017 à 19:04:28

Voici le code, je viens de le changer je peut me tromper, mais en fait je n'avait pas de conteneur pour mon ensemble.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">

    <link rel="icon" type="image/gif" href="/favicon.gif" />
    

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


    <link rel="stylesheet" type="text/css" href="style.css" >

    
    <title>TestBoot</title>
</head>

<body>


<div class="container">
 <div class="row">

    <div class="col-lg-2">
      <a class="" href="#"> Surfers Co. </a>
    </div>

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded col-lg-8">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">BOARDS <span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link justify-content-center" href="#">ACCESSORIE</a>
          <a class="nav-item nav-link" href="#">BLOG</a>
          <a class="nav-item nav-link" href="#">TECHNOLOGIY</a>
          <a class="nav-item nav-link" href="#">TEAM</a>
          <a class="nav-item nav-link" href="#">DEALERS</a>
          <a class="nav-item nav-link disabled" href="#">Disabled</a>
        </div>
      </div>
    </nav>

    <div class="col-lg-2">
      <a class="btn btn-block btn-social btn-twitter">
      <span class="fa fa-twitter"></span>
      Sign in with Twitter
      </a>
       
      <a class="btn btn-social-icon btn-twitter">
        <span class="fa fa-twitter"></span>
      </a>

    </div>

 </div>
</div>


<!-- ///////////////////////////   JQ, A, JS, In    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->

  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>   
</body>
</html>

-
Edité par exen 18 septembre 2017 à 19:09:55

Compos sui.

Lamecarlate

18 septembre 2017 à 19:46:44

Ça m'a l'air correct, pourtant. Depuis que tu as ajouté le conteneur (.container je suppose), pas de changement ? Tu peux faire une capture d'écran de ce que tu obtiens avec ça ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

exen

18 septembre 2017 à 19:53:04

Juste après avoir posé la question lol

J'allais pas resté à rien faire alors que j’étais dessus

Tiens au passage il y à un moyen de changer la hauteur de la navbar ? Promis pour le coup je ne ferais aucunes recherches dans mon coin

En tout cas merci pour ta réponse

Compos sui.

Lamecarlate

18 septembre 2017 à 20:01:26

Euh ben j'ai pas compris si le problème est résolu ou non. Mais tu sais, beaucoup de tes questions ont leurs réponses dans la doc de Bootstrap, pense à t'y référer (en prenant la bonne version) souvent

Pas d'aide concernant le code par MP, le forum est là pour ça :)

exen

18 septembre 2017 à 20:15:17

C'est ce que j'ai fait lol, mais j'y vais à reculons, j'aime pas bootstrap je préfère materialize

Et je fait un effort sur humain pour ne pas faire ma propre feuille de style, et de juste garder le link de bootstrap pour coller a l'énoncée du devoir lol

Bon aller je colle en résolu.

Compos sui.