images de positionnement dans la grille

voix
0

Je suis en train d'obtenir les icônes de drapeau dans l'en-tête plus ensemble (je l'ai joint une photo de la section concernée). Je suis passé autour des valeurs CSS, mais jusqu'à présent sans succès. J'utilise Bootstrap aussi bien.

Voici le code correspondant:

.flag {
    height: 25px;
    width: 25px;
    padding: 0px;
}
<nav class=navbar navbar-expand-sm navbar-light bg-light mb-3>
    <div class=container>
        <a class=navbar-brand href=#>
            <img src=./images/logo/LOGO DARKGLOBE.png height=100px width=150px>
        </a>
        
        <ul class=navbar-nav align-items-center>
            <li class=nav-item>
                <a class=nav-link href=./home.html>Home</a>
            </li>
            <li class=nav-item dropdown>
                <a class=nav-link dropdown-toggle active data-toggle=dropdown href=#>Empresa</a>
                <div class=dropdown-menu>
                    <a href=# class=dropdown-item>Quem somos</a>
                    <a href=# class=dropdown-item>Missao & Valores</a>
                    <a href=# class=dropdown-item>Ambiente & Sustentabilidade</a>
                    <a href=# class=dropdown-item>Higiene, Seguranc & Saude</a>
                    <a href=# class=dropdown-item>Emprego & Igualdade de Oportunidades</a>
                </div>
            </li>
            <li class=nav-item>
                <a class=nav-link href=#>Portfolio</a>
            </li>
            <li class=nav-item>
                <a class=nav-link href=#>Projectos em Curso</a>
            </li>
            <li class=nav-item>
                <a class=nav-link href=./contactos.html>Contacto</a>
            </li>
            <li class=nav-item>
                <div class=row>
                    <div class=col>
                        <a href=#>
                            <img class=flag src=./images/flags/portugal-flag-button-round-icon-256.png>
                        </a>
                        
                    </div>
                    <div class=col>
                        <a href=#>
                            <img class=flag src=./images/flags/spain-flag-button-round-icon-256.png>
                        </a>		
                    </div>
                </div>
                <div class=row>
                    <div class=col>
                        <a href=#>
                            <img class=flag src=./images/flags/france-flag-button-round-icon-256.png>
                        </a>
                    </div>
                    <div class=col>
                        <a href=#>
                            <img class=flag src=./images/flags/united-kingdom-flag-button-round-icon-256.png>
                        </a>
                    </div>
                </div>
            </li>
            
        </ul>
    </div>
</nav>

Je devine que c'est une solution assez simple, mais c'est la première fois que je crée un site Web à partir de zéro. Le peu que je sais sur le design web que j'ai luisaient de lire ici et là. Merci d'avance!

Entête

Créé 27/11/2018 à 15:22
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

Utilisez bootstrap comme celui-ci (ce qui est sensible):

CSS

    .row {
      background: #f8f9fa;
      margin-top: 20px;
    }

    .col {
       border: solid 1px #6c757d;
       padding: 10px;
    }

    ul {
       list-style-type: none;
    }

    img {
       max-width: 25px;
       height: 25px;
    }

HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div style="margin-top: 20px" class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">

      <li class="nav-item active">
        <a class="nav-link" href="#">Title 1<span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Title 2</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown Title
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action 1</a>
          <a class="dropdown-item" href="#">Action 2</a>
        </div>
      </li>
      <li class="nav-item">
        <ul>
          <li>
            <img  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4tb7Zyc_O4bp2PqOYv8sTkX8Kp8gzl4RzG-sQmDyH-kvLNs8g"/>
          </li>
          <li>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4tb7Zyc_O4bp2PqOYv8sTkX8Kp8gzl4RzG-sQmDyH-kvLNs8g"/>
          </li>
        </ul> 
      </li>
      <li class="nav-item">
        <ul>
          <li>
            <img  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4tb7Zyc_O4bp2PqOYv8sTkX8Kp8gzl4RzG-sQmDyH-kvLNs8g"/>
          </li>
          <li>
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4tb7Zyc_O4bp2PqOYv8sTkX8Kp8gzl4RzG-sQmDyH-kvLNs8g"/>
          </li>
        </ul> 
      </li>
    </ul>
  </div>
</nav>

http://jsfiddle.net/aq9Laaew/280260/

Créé 27/11/2018 à 15:57
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more